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

Popup Fenster mit CSS erstellen das automatisch sich öffnet

Sempervivum

Senior HTML'ler
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
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:

Neueste Beiträge

Oben