diedVIPs

html knowhow

Button mit Popup









Button mit Popup
So sieht´s aus

Quellcode

<html>
<head>

<style type="text/css">
#h1 {text-align: center; font-family: Tahoma, Arial, sans-serif; color: blue; margin: 8px 0;}
.box {width: 40%; margin: 0 auto; padding: 35px; text-align: center;}
.button {font-size: 1.2em; padding: 10px; color: black; background-color:aqua; border: 2px solid #06D85F; border-radius: 50px; text-decoration: none; cursor: pointer; transition: all 0.3s ease-out;}
.button:hover {background: #06D85F;}
.overlay {position: fixed; top: 190px; bottom: 0; left: 0; right: 0; visibility: hidden; opacity: 0;}
.overlay:target {visibility: visible; opacity: 1;}
.popup {margin: 7px auto; padding: 20px; color:white; background: grey; border-width:10px; border-color:red; border-radius: 10px; width: 30%; position: relative; transition: all 5s ease-in-out;}
.popup h2 {margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif;}
.popup .close {position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333;}
.popup .close:hover {color: #06D85F;}
.popup .content {max-height: 30%; overflow: auto;}
@media screen and (max-width: 700px){
.box {width: 70%;}
.popup {width: 70%;} }
</style>
</head>

<body >
<center>
<div class="box"><a class="button" href="#popup1">Zeige die Nachricht</a></div>
<div id="popup1" class="overlay">
<div class="popup"><h2 id="h1">Hier bin ich</h2><a class="close" href="#">&times;</a>
<div class="content">Thank to pop me out of that button, but now i'm done so you can close this window. </div>
</div>
</center>
<script>
function myFunction() {
var x = document.getElementById('container');
if (x.style.display === 'none') {
x.style.display = 'block';
} else { x.style.display = 'none'; } }
</script>
</body>

</html>









Kontakt    Datenschutz   Impressum