gnude
Neues Mitglied
Hallo,
ich bin neu in dem Forum (aber nicht neu in der IT Welt) und komme gleich mal mit einer für mich ganz interessanten Frage...
Mein Ziel ist eis ein Popfenster zu erstellen das auf CSS basiert und beim öffnen der Seite nach 5 Sekunden
sich öffnet und dann nach 15 von selbst wieder schliesst. In Javascript lässt sich sowas realisieren,
alllerdings haben viele Browser ja Javascript deaktiviert so das es hier äussert unprofesionell wirkt.
Ein einfaches Popup das sich auf Mausklick öffnet und schliesst habe ich selbst hinbekommen.
Aber mir fehlt der Automatismus, so das es beim Aufruf der Seite selbst nach einiger Zeit aufgeht und
sich auch wieder schliesst. Freu mich auf Ideen, Diskussion oder Lösungsvorschläge.
Mein Code bisher sieht wie folgt aus:
ich bin neu in dem Forum (aber nicht neu in der IT Welt) und komme gleich mal mit einer für mich ganz interessanten Frage...
Mein Ziel ist eis ein Popfenster zu erstellen das auf CSS basiert und beim öffnen der Seite nach 5 Sekunden
sich öffnet und dann nach 15 von selbst wieder schliesst. In Javascript lässt sich sowas realisieren,
alllerdings haben viele Browser ja Javascript deaktiviert so das es hier äussert unprofesionell wirkt.
Ein einfaches Popup das sich auf Mausklick öffnet und schliesst habe ich selbst hinbekommen.
Aber mir fehlt der Automatismus, so das es beim Aufruf der Seite selbst nach einiger Zeit aufgeht und
sich auch wieder schliesst. Freu mich auf Ideen, Diskussion oder Lösungsvorschläge.
Mein Code bisher sieht wie folgt aus:
HTML:
<html>
<title>
Testseite CSS Popup
</title>
<style>
.modal-window {
position: fixed;
background-color: rgba(200, 200, 200, 0.75);
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.modal-window:target {
opacity: 1;
pointer-events: auto;
}
.modal-window>div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 2rem;
background: #fff;
color: #444;
}
.modal-window header {
font-weight: bold;
}
.modal-close {
color: #aaa;
line-height: 50px;
font-size: 120%;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 70px;
text-decoration: none;
}
.modal-close:hover {
color: #000;
}
.modal-window h1 {
font-size: 200%;
margin: 0 0 15px;
}
</style>
<body>
<font size=5>
<a href="#open-modal">Hier klicken</a>
</font>
<div id="open-modal" class="modal-window">
<div>
<a href="#modal-close" title="Close" class="modal-close">close ×</a>
<h1>Testseite</h1>
<div>Das ist eine Testseite</div>
</div>
</div>
</body>
</html>
