Automatisches Pop-Up Fenster |
Begrüßen Sie ihre Besucher entsprechend der Tageszeit |
So sieht´s aus |
|
Quellcode |
<html> <head> <style> .modalDialog {position: Fixed; font-family: Verdana, Sans-Serif; top: 0; right: 0; bottom: 0; left: 0; z-index: 99999; opacity: 0; transition: opacity 400ms ease-in;pointer-events: None;} .modalDialog:target {opacity: 1;pointer-events: Auto;} .modalDialog > div {width: 400px; position: relative; margin: 10% Auto; padding: 5px 20px 13px 20px; border-radius: 10px; background-color: #FFFFFF; background: linear-gradient(lightblue, blue); cursor: Default;} .close {background-color: grey; color: white; line-height: 25px; position: Absolute; right: -12px; text-align: Center; top: -10px; width: 24px; text-decoration: None; font-weight: Bold; border-radius: 12px; box-shadow: 1px 1px 3px #000000;} .close:hover {background-color: #00D9FF;} </style> </head> <body> <div id="openModal" class="modalDialog"> <div> <a href="#close" title="Schließen" class="close">X</a> <h1>Hinweis</h1> <p>Diese Seite ist neu. Ich hoffe, sie gefällt Ihnen. <img src="../Bilder/Zwinkerer.png" style="width: 30%;height:auto;" alt="Zwinkerer" /><br/> Viel Süaß damit !!</p> </div> </div><br/> </body> </html> |
Kontakt Datenschutz Impressum |