Popup Fenster mit CSS erstellen das automatisch sich öffnet
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.
Der hier verwendete Code
<style>
#modal-window {
position: fixed;
background-color: rgba(200, 200, 200, 0.75);
width:50vw;
height:300px;
border:2px solid black;
margin-top:-100vh;
z-index: 999;
left:25vw;
text-align:center;
transition: all 0.3s;
animation:modal 20s linear 1;
}
#modal-window >.header{
width: 100%;
padding:0;
color: white;
font-weight: bold;
height:45px;
background:rgba(0,0,0,0.7);
}
.modal-close {
color:white;
background:rgba(255,0,0,0.5);
font-size:20px;
text-align: left;
float:left;
width: 20px;
padding:10px 2px;
text-decoration: none;
}
.modal-close:hover {
color:gree;
background:green;
}
.modal-window h1 {
font-size: 200%;
margin: 0 0 15px;
}
@keyframes modal {
24% {margin-top:-100vh;}
25% { margin-top:0px;}
99% { margin-top:0px;}
100% { margin-top:-100vh;}
}
.frame {
position: absolute;
bottom: 3px;
left:calc(50% - 100px);
width: 200px;
height: 200px;
border-radius: 22px;
overflow: hidden;
background: #222;
color: #eee;
}
.tgl {
display: none;
}
.tgl + .tgl-btn {
cursor: pointer;
position: absolute;
left:calc(50% - 10px);
top: 15px;
display: block;
width: 3em;
height: 1.5em;
padding: 2px;
border: 2px solid rgba(0, 255, 0, 0.3);
border-radius: 1.5em;
background-color: rgba(0, 255, 0, 0.1);
box-shadow: 0 0 12px rgba(0, 255, 0, 0.2);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
transition: all 0.4s ease;
}
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
content: "";
position: relative;
display: block;
width: 50%;
height: 100%;
}
.tgl + .tgl-btn:after {
left: 50%;
border-radius: 50%;
background: lime;
transition: all 0.2s ease;
}
.tgl + .tgl-btn:before {
display: none;
}
.tgl:checked + .tgl-btn {
border-color: #444249;
background: transparent;
box-shadow: none;
}
.tgl:checked + .tgl-btn:after {
left: 0;
background-color: #444249;
}
.tgl:checked ~ .counter .num {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.counter {
position: relative;
display: flex;
justify-content: center;
height: 100px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.nums {
position: relative;
display: inline-block;
width: 70px;
height: 100px;
margin: 0 5px;
border-radius: 5px;
border-top: 1px solid #393939;
box-shadow: 0 3px 10px #111;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.nums:before {
content: "";
position: absolute;
z-index: 1000;
left: 0;
top: 50%;
height: 1px;
width: 100%;
border-bottom: 2px solid black;
-webkit-transform: translate3d(0, -1px, 0);
transform: translate3d(0, -1px, 0);
}
.nums:after {
content: "0";
overflow: hidden;
z-index: 0;
position: absolute;
bottom: 0;
left: 0;
display: block;
height: calc(50% - 1px);
width: 100%;
border-bottom: 1px solid #444444;
border-top: 1px solid black;
border-radius: 0 0 5px 5px;
background: #2a2a2a;
box-shadow: inset 0 15px 50px #202020;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
font-size: 72px;
line-height: 0;
text-align: center;
text-shadow: 0 1px 2px #333;
}
.num {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 5px;
font-size: 72px;
-webkit-transform: rotateX(0);
transform: rotateX(0);
transition: 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-play-state: running;
animation-play-state: running;
}
.num:before, .num:after {
overflow: hidden;
position: absolute;
left: 0;
display: block;
height: 50%;
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
text-align: center;
text-shadow: 0 1px 2px #333;
}
.num:before {
content: attr(data-num);
z-index: 1;
top: 0;
border-radius: 5px 5px 0 0;
box-shadow: inset 0 15px 50px #111111;
background: #181818;
line-height: 1.38;
}
.num:after {
content: attr(data-num-next);
top: 0;
height: calc(50% - 1px);
border-bottom: 1px solid #444444;
border-radius: 0 0 5px 5px;
box-shadow: inset 0 15px 50px #202020;
background: #2a2a2a;
line-height: 0;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.nums._units .num:nth-of-type(1) {
z-index: 10;
-webkit-animation-name: num-units;
animation-name: num-units;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-duration: 10s;
animation-duration: 10s;
}
.nums._tens .num:nth-of-type(1) {
z-index: 10;
-webkit-animation-name: num-tens;
animation-name: num-tens;
-webkit-animation-delay: 9s;
animation-delay: 9s;
-webkit-animation-duration: 100s;
animation-duration: 100s;
}
.nums._units .num:nth-of-type(2) {
z-index: 9;
-webkit-animation-name: num-units;
animation-name: num-units;
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-duration: 10s;
animation-duration: 10s;
}
.nums._tens .num:nth-of-type(2) {
z-index: 9;
-webkit-animation-name: num-tens;
animation-name: num-tens;
-webkit-animation-delay: 19s;
animation-delay: 19s;
-webkit-animation-duration: 100s;
animation-duration: 100s;
}
.nums._units .num:nth-of-type(3) {
z-index: 8;
-webkit-animation-name: num-units;
animation-name: num-units;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 10s;
animation-duration: 10s;
}
.nums._tens .num:nth-of-type(3) {
z-index: 8;
-webkit-animation-name: num-tens;
animation-name: num-tens;
-webkit-animation-delay: 29s;
animation-delay: 29s;
-webkit-animation-duration: 100s;
animation-duration: 100s;
}
.nums._units .num:nth-of-type(4) {
z-index: 7;
-webkit-animation-name: num-units;
animation-name: num-units;
-webkit-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-duration: 10s;
animation-duration: 10s;
}
.nums._tens .num:nth-of-type(4) {
z-index: 7;
-webkit-animation-name: num-tens;
animation-name: num-tens;
-webkit-animation-delay: 39s;
animation-delay: 39s;
-webkit-animation-duration: 100s;
animation-duration: 100s;
}
.nums._units .num:nth-of-type(5) {
z-index: 6;
-webkit-animation-name: num-units;
animation-name: num-units;
-webkit-animation-delay: 4s;
animation-delay: 4s;
-webkit-animation-duration: 10s;
animation-duration: 10s;
}
.nums._tens .num:nth-of-type(5) {
z-index: 6;
-webkit-animation-name: num-tens;
animation-name: num-tens;
-webkit-animation-delay: 49s;
animation-delay: 49s;
-webkit-animation-duration: 100s;
animation-duration: 100s;
}
.nums._units .num:nth-of-type(6) {
z-index: 5;
-webkit-animation-name: num-units;
animation-name: num-units;
-webkit-animation-delay: 5s;
animation-delay: 5s;
-webkit-animation-duration: 10s;
animation-duration: 10s;
}
.nums._tens .num:nth-of-type(6) {
z-index: 5;
-webkit-animation-name: num-tens;
animation-name: num-tens;
-webkit-animation-delay: 59s;
animation-delay: 59s;
-webkit-animation-duration: 100s;
animation-duration: 100s;
}
.nums._units .num:nth-of-type(7) {
z-index: 4;
-webkit-animation-name: num-units;
animation-name: num-units;
-webkit-animation-delay: 6s;
animation-delay: 6s;
-webkit-animation-duration: 10s;
animation-duration: 10s;
}
.nums._tens .num:nth-of-type(7) {
z-index: 4;
-webkit-animation-name: num-tens;
animation-name: num-tens;
-webkit-animation-delay: 69s;
animation-delay: 69s;
-webkit-animation-duration: 100s;
animation-duration: 100s;
}
.nums._units .num:nth-of-type(8) {
z-index: 3;
-webkit-animation-name: num-units;
animation-name: num-units;
-webkit-animation-delay: 7s;
animation-delay: 7s;
-webkit-animation-duration: 10s;
animation-duration: 10s;
}
.nums._tens .num:nth-of-type(8) {
z-index: 3;
-webkit-animation-name: num-tens;
animation-name: num-tens;
-webkit-animation-delay: 79s;
animation-delay: 79s;
-webkit-animation-duration: 100s;
animation-duration: 100s;
}
.nums._units .num:nth-of-type(9) {
z-index: 2;
-webkit-animation-name: num-units;
animation-name: num-units;
-webkit-animation-delay: 8s;
animation-delay: 8s;
-webkit-animation-duration: 10s;
animation-duration: 10s;
}
.nums._tens .num:nth-of-type(9) {
z-index: 2;
-webkit-animation-name: num-tens;
animation-name: num-tens;
-webkit-animation-delay: 89s;
animation-delay: 89s;
-webkit-animation-duration: 100s;
animation-duration: 100s;
}
.nums._units .num:nth-of-type(10) {
z-index: 1;
-webkit-animation-name: num-units;
animation-name: num-units;
-webkit-animation-delay: 9s;
animation-delay: 9s;
-webkit-animation-duration: 10s;
animation-duration: 10s;
}
.nums._tens .num:nth-of-type(10) {
z-index: 1;
-webkit-animation-name: num-tens;
animation-name: num-tens;
-webkit-animation-delay: 99s;
animation-delay: 99s;
-webkit-animation-duration: 100s;
animation-duration: 100s;
}
@-webkit-keyframes num-units {
0% {
z-index: 50;
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
10% {
z-index: 50;
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
90% {
z-index: 1;
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
90.0001% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
100% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
}
@keyframes num-units {
0% {
z-index: 50;
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
10% {
z-index: 50;
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
90% {
z-index: 1;
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
90.0001% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
100% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
}
@-webkit-keyframes num-tens {
0% {
z-index: 50;
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
1% {
z-index: 50;
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
90% {
z-index: 1;
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
90.0001% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
100% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
}
@keyframes num-tens {
0% {
z-index: 50;
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
1% {
z-index: 50;
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
90% {
z-index: 1;
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
90.0001% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
100% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
}
</style>
<body>
<div id="modal-window">
<div class="header">
<a href="#modal-close" title="Close" class="modal-close">X</a>
</div>
<h1>Testseite</h1>
<div>Das ist eine Testseite</div>
</div>
</div>
<div class="frame">
<input class="tgl" id="button" type="checkbox"><label class="tgl-btn" for="button"></label></input>
<div class="counter">
<div class="nums _tens">
<div class="num" data-num="0" data-num-next="1"></div>
<div class="num" data-num="1" data-num-next="2"></div>
<div class="num" data-num="2" data-num-next="3"></div>
<div class="num" data-num="3" data-num-next="4"></div>
<div class="num" data-num="4" data-num-next="5"></div>
<div class="num" data-num="5" data-num-next="6"></div>
<div class="num" data-num="6" data-num-next="7"></div>
<div class="num" data-num="7" data-num-next="8"></div>
<div class="num" data-num="8" data-num-next="9"></div>
<div class="num" data-num="9" data-num-next="0"></div>
</div>
<div class="nums _units">
<div class="num" data-num="0" data-num-next="1"></div>
<div class="num" data-num="1" data-num-next="2"></div>
<div class="num" data-num="2" data-num-next="3"></div>
<div class="num" data-num="3" data-num-next="4"></div>
<div class="num" data-num="4" data-num-next="5"></div>
<div class="num" data-num="5" data-num-next="6"></div>
<div class="num" data-num="6" data-num-next="7"></div>
<div class="num" data-num="7" data-num-next="8"></div>
<div class="num" data-num="8" data-num-next="9"></div>
<div class="num" data-num="9" data-num-next="0"></div>
</div>
</div>
</div>
</body>