Popup Fenster mit CSS erstellen das automatisch sich öffnet

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.508
297
83
66
Nicht so schnell aufgeben. Ich hatte nicht genau genug hin gesehen, welches Element animiert wird und daher die falsche Breite verwendet. Ich habe das Ganze noch etwas optimiert und nach Overlay und Modal unterschieden. Dann kann man das Overlay statisch durchgängig für Mausevents machen.
Code:
    <script>
        function closemodal() {
            document.querySelector(".overlay").style.display = "none";
            document.querySelector(".modal").style.display = "none";
        }
    </script>
    <style>
        .overlay {
            position: fixed;
            background-color: rgba(200, 200, 200, 0.75);
            top: 0;
            left: 0;
            opacity: 0;
            width: 100vw;
            height: 100vh;
            z-index: 999;
            pointer-events: none;
            animation: ani 5s forwards;
            animation-delay: 3s;
        }
        .modal {
            width: 360px;
            position: absolute;
            top: 30vh;
            left: 50vw;
            opacity: 0;
            z-index: 1000;
            transform: translate(-50%, -50%);
            padding: 2rem;
            background: #fff;
            color: #444;
            animation: ani 5s forwards;
            animation-delay: 3s;
        }
        .modal 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 h1 {
            font-size: 200%;
            margin: 0 0 15px;
        }
        @keyframes ani {
            0% {
                opacity: 0;
            }
            1% {
                opacity: 1;
            }
            99% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
    </style>


    <div class="overlay">
    </div>
    <div class="modal">
        <a href="#modal-close" title="Close" class="modal-close" onclick="closemodal()">close &times;</a>
        <a href="https://www.google.de"><img src="https://www.nitschke-marl.de/bild.png"></a>
    </div>
    <a href="www.nitschke-marl.de"> Hier sind die Links die nicht gehen</a>
 
Zuletzt bearbeitet:

Sailor

Aktives Mitglied
14 Juli 2017
442
53
28
Auch die Idee mit der animierten Breite/Höhe sollte funktionieren... setze mal das CSS für...
CSS:
.modal-window {
  position: fixed;
  background-color: rgba(200, 200, 200, 0.75);
  top: 0;
/*  right: 0;*/
/*  bottom: 0;*/
  left: 0;
  width: 0px;
  height: 0px;
  overflow: hidden;
  z-index: 999;
  opacity: 0;
  pointer-events: auto;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
und die keyframes auf...
CSS:
@keyframes example {
  0%   {opacity: 0; width: 0; height: 0;}
  19%  {opacity: 0; width: 0; height: 0;}
  20%  {opacity: 1; width: 100vw; height: 100vh;}
  99%  {opacity: 1; width: 100vw; height: 100vh;}
  100% {opacity: 0; width: 0; height: 0;}
}
Dann ist es so, dass außerhalb der Animation das Modal immer nur 0px x 0px links oben in der Ecke sitzt.
 
Werbung: