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

Popup Fenster mit CSS erstellen das automatisch sich öffnet

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:

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 &times;</a>
    <h1>Testseite</h1>
    <div>Das ist eine Testseite</div>
  </div>
</div>
</body>

</html>
 
Werbung:
Wow ich bin begeistert! Hätte nicht gedacht das ich so schnell Antworten bekomme und die mich auch auf die richtige Spur führen.
Ein tolle Forum.
Werde mich damal einlesen und dann ggf. mit Fragen wiederkommen.
 
Werbung:
Zeitgesteuert sieht interessant aus, aber wie bekomme ich das Popup erst zu einer bestimmte Zeit geöffnet. In dem gezeigten Fall :
Ist das Fenster ja von Anfang an aktiv. Mein Ziel ist eine bestehende Webseite so zu erweitern das dieses extra Fenster erst nach einer bestimmten Zeit sich öffnet.
 
Indem du in der keyframe-Definition den Anfangswert auf 0 setzt, dann einen weiteren 0-Wert direkt vor dem Zeitpunkt, an dem das Pop-Up erscheinen soll... zum Ausblenden dann genau anders herum... etwa so:
HTML:
@keyframes example {
  0%   {opacity: 0;}
  19%  {opacity: 0;}
  20%  {opacity: 1;}
  99%  {opacity: 1;}
  100% {opacity: 0;}
}
 
Ich befürchte meine CSS Kenntnisse sind nicht ausreichend. Wie genau binde ich das ein damit es nach ein paar Sekunden startet?
 
Werbung:
Wie sieht denn der Code (HTML / CSS) aus, in dem du ein Element animieren willst.
Der Code aus deinem Eingangspost kann es ja kaum sein.
 
Da gibt es wohl auch mehrere Wege.
Bei den Keyframes musst du erstmal wissen, was du genau willst.
5 Sekunden soll das Modal nicht da sein und dann für 15 Sekunden bleiben.

In mein Beispiel heißt es das der Keyframe 20 Sekunden dauern muss.
Da ich dir keine 100% Lösungen bauen wollte, musst du dir das dann umdenken.
In mein Fall kommt das Modal nach 5 Sekunden ( 25% der gesamt Länge ) reingefahren,
dann bleibt es bis 99% der gesamt Länge an der gleichen stelle.,
bei 100% fährt er wieder raus.

Jetzt ist es deine Aufgabe, das auf dein Projekt anzuwenden.
Ist fast das gleiche , du musst nur paar Sachen ändern.
Das sollte man auch als Anfänger hinbekommen
 
Zuletzt bearbeitet:
Werbung:
Auch wenn der Code nur zum Üben ist, dann sollte er gerade richtig sein... sonst übst du ja was Falsches!
Da sind einige Fehler und auch veraltete Elemente drin, die du dringend korrigieren solltest - sonst fliegt dir dein Projekt irgendwann um die Ohren, weil der eine oder andere Browser dich nicht mehr versteht.
Aber ob du korrekten und validen Code produzieren willst liegt ja an dir... und wie gut du die Grundlagen drauf hast.
Zum demonstrieren, wie es gehen sollte, füge mal den folgenden CSS Code direkt zu Beginn deiner <style> Definition ein.
CSS:
@keyframes example {
  0%   {opacity: 0;}
  19%  {opacity: 0;}
  20%  {opacity: 1;}
  99%  {opacity: 1;}
  100% {opacity: 0;}
}
#open-modal {
  animation-name: example;
  animation-duration: 20s;
  animation-delay: 0s;
}
 
Wir kommen meiner Idee schon sehr nahe. Allerdings geht weder der close button noch ein link im fenster.... hat noch jemand freundlicherweise eine Idee?

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: 360px;
  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;
}
@keyframes example {
  0%   {opacity: 0;}
  19%  {opacity: 0;}
  20%  {opacity: 1;}
  99%  {opacity: 1;}
  100% {opacity: 0;}
}
#open-modal {
  animation-name: example;
  animation-duration: 20s;
  animation-delay: 0s;
}
</style>
<body>
<div id="open-modal" class="modal-window">
  <div>
    <a href="#modal-close" title="Close" class="modal-close">close &times;</a>
    <a href="www.google.de">zu
    google</a>
  </div>
</div>
</body>
</html>
 
Natürlich kannst du das Modal nicht über den close-Button schließen... da ist nichts in deinem Code, was das verursachen könnte... oder denkst du der Link zu href="#modal-close" würde irgendwas bewirken?

Und wenn du den Link zu Google richtig ausschreiben würdest ... https://www.google.de... dann würde der funktionieren.
 
Werbung:
Hallo ,
ich habe den Link korrigiert, geht leider immer noch nicht.
Was müsste ich denn ändern damit die close Sache funktioniert?

Ohne diese Funktion zum automatischen offnen hat es interessanter weise
auch geklappt. :rolleyes:
 
Zuletzt bearbeitet:
Dann mache folgendes... um den Link zu Google funktionsfähig zu machen, darf dort natürlich nicht pointer-events: none; für das Element .modal-window definiert sein... setzte das mal auf pointer-events: auto;

Dein zweiter Punkt... man kann die @keyframe Animation nicht so ohne weiteres abbrechen. Aber man kann mit JavaScript dem Modal einen zusätzlichen Style geben... zB diplay: none; oder visibilty: hidden;. Dann läuft die Animation zwar weiter, bis die 20 Sekunden vorbei sind, aber man sieht das Element nicht nicht mehr.
Dazu füge in deinem <head>... </head> Bereich folgenden Script ein:
Javascript:
<script>
function closemodal() {
   document.getElementById("open-modal").style.display = "none";
   }
</script>
dann füge deinem Link für das Schließen des Modal ein onclick="closemodal()" hinzu.
 
Hallo,
ein neues Problem ergibt sich.... das Fenster geht auf wie es soll,
und schliesst sich wie es soll.
Allerdings sind auf der zugrunde liegende Homepage noch einige Links
und die Funktionieren nicht mehr.
Bevor das Popup geöffnet wird gehen die Links nicht und wenn es automatisch geschlossen wird auch nicht. Lediglich wenn ich es mit dem "Close Button" schliesse gehen die Links auf der Homepage.

Der Code sieht aktuell so aus:


Code:
<script>
function closemodal() {
   document.getElementById("open-modal").style.display = "none";
   }
</script>

<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: auto;
  -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: 360px;
  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;
}

@keyframes example {
  0%   {opacity: 0;}
  19%  {opacity: 0;}
  20%  {opacity: 1;}
  99%  {opacity: 1;}
  100% {opacity: 0;}
}
#open-modal {
  animation-name: example;
  animation-duration: 12s;
  animation-delay: 8s;
}
</style>



<div id="open-modal" class="modal-window">
  <div>
    <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>
</div>
<a href="www.nitschke-marl.de"> Hier sind die Links die nicht gehen</a>
 
Werbung:
Ja das zugrunde liegende Problem habe ich mir auch so ähnlich vorgestellt. Die Lösung klingt schon ganz interessant und ich werde es mal ausprobieren. Und berichten.
 
Klappt leider nicht so wie geplant.... Idee war nicht schlecht aber bringt mich nicht weiter.... verschiebt das Fenster nur.
 
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:
Zurück
Oben