Popup Fenster mit CSS erstellen das automatisch sich öffnet

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

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

gnude

Neues Mitglied
13 Juli 2019
10
0
1
49
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>
 

gnude

Neues Mitglied
13 Juli 2019
10
0
1
49
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.
 

gnude

Neues Mitglied
13 Juli 2019
10
0
1
49
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.
 

Sailor

Aktives Mitglied
14 Juli 2017
394
46
28
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;}
}
 

gnude

Neues Mitglied
13 Juli 2019
10
0
1
49
Ich befürchte meine CSS Kenntnisse sind nicht ausreichend. Wie genau binde ich das ein damit es nach ein paar Sekunden startet?
 

Sailor

Aktives Mitglied
14 Juli 2017
394
46
28
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.
 

basti1012

Aktives Mitglied
26 November 2017
842
85
28
38
Minden
sebastian1012.bplaced.net
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 mußt du dir das dann umdenken.
In mein fall kommt das Modal nach 5 Sekunden ( 25% der gesamt länge ) rein gefahren,
dann bleibt es bis 99% der gesamt länge an der gleichen stelle.,
bei 100% fährt er wiede raus.

Jetzt ist es deine Aufgabe das auf dein Projekt anzuwenden.
Ist fast das gleiche , du mußt nur paar sachen ändern.
Das sollte man auch als Anfänger hinbekommen
 

Sailor

Aktives Mitglied
14 Juli 2017
394
46
28
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;
}
 

gnude

Neues Mitglied
13 Juli 2019
10
0
1
49
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>
 

Sailor

Aktives Mitglied
14 Juli 2017
394
46
28
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.
 

gnude

Neues Mitglied
13 Juli 2019
10
0
1
49
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:

Sailor

Aktives Mitglied
14 Juli 2017
394
46
28
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.
 

gnude

Neues Mitglied
13 Juli 2019
10
0
1
49
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>
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.399
274
83
66
Das liegt daran, dass die Opacity animiert wird. Auch wenn das Modal unsichtbar ist, nimmt es dennoch Mausaktionen an und sie gelangen nicht zu der Seite darunter. Einfachste Lösung wäre, das Modul für Mausaktionen mit pointer-events:none;durchlässig zu machen, aber wie ich sehe, ist da ein Link im Modal, der würde dann nicht mehr funktionieren.
Ich schlage vor, die Breite zusätzlich zu animieren, solange das Modal unsichtbar ist:
Code:
@keyframes example {
  0%   {opacity: 0; width: 0px;}
  18% {opacity: 0; width: 0px;}
  19%  {opacity: 0;; width: 360px;}
  20%  {opacity: 1;; width: 360px;}
  98%  {opacity: 1;; width: 360px;}
  99%  {opacity: 0; width: 360px;}
  100% {opacity: 0; width: 0px;}
}
#open-modal {
  animation-name: example;
  animation-duration: 20s;
  animation-delay: 0s;
}
 

gnude

Neues Mitglied
13 Juli 2019
10
0
1
49
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.
 

gnude

Neues Mitglied
13 Juli 2019
10
0
1
49
Klappt leider nicht so wie geplant.... Idee war nicht schlecht aber bringt mich nicht weiter.... verschiebt das Fenster nur.
 
Werbung: