CSS-Fenster nach dem laden

CSS-Fenster nach dem laden der Seite

Eine halbe Sekunde nach dem Seitenaufruf wird das Fenster eingeblendet. Natürlich könnt ihr Position, Größe, Hintergrund und eigentlich alles anpassen.

Da ich hier ein größeres Fenster mit Hintergrundbild erstellt habe wird dieses in der mobilen Ansicht ausgeblendet. Statt dessen wird ein kleineres Fenster eingeblendet um Platz und Ladezeit anzupassen. Dieses Responsive Verhalten könnt ihr prüfen indem ihr das Browser-Fenster in der Breite verändert.

CSS-Code

Diesen Code per Einstellungen > CSS einfügen und anpassen.

/** Überschrift H2 innerhalb des Popups **/
#popup h2 {
  color:#006600;					/** Schriftfarbe**/
  font-size:22px;						/** Schriftgröße **/
  font-weight:bold;					/** Schrift Fett **/
}
	/** definiert den Hintergrund der Texte **/
.hintergrund {
  background: rgba(255, 255, 255, 0.8); 	/** Hintergrund Weiss, 80% Durchscheinend**/
  padding:12px;						/** Textabstand zum Rand**/
  border-radius:5px;					/** Runde Ecken **/
  border-width:1px;					/** Rahmenstärke**/
  border-style:solid;					/**Rahmenstil **/
  border-color:#006600;				/** Rahmenfarbe **/
  font-weight:bold;					/** Schrift Fett **/
  margin:20px;						/** Abstand zum Fensterrand **/
}
	/** Definiert den Schließen.Button **/
#close{
  position:absolute;					/** Fixiert (scrollt nicht mit) **/
  background:#006600;				/** Hintergrundfarbe **/
  color:#fff;						/** Farbe des Kreuzes **/
  right:-15px;						/** Position**/
  top:-15px;						/** Position**/
  border-radius:50%;					/** Rund**/
  width:30px;						/** Größe**/
  height:30px;						/** Größe**/
  line-height:30px;					/** Größe**/
  text-align:center;					/** Zentriert**/
  font-size:15px;						/** Größe**/
  font-weight:bold;					/** Fett**/
  font-family:'Arial Black', Arial, sans-serif;	/** Schriftart**/
  cursor:pointer;						/** Klickbar**/
}
	/** Definiert die Link-Button **/
.button-popup {
  width:50px;						/** Breite**/
  border-radius: 10px;				/** Runde Ecken**/
  color: #ffffff;						/** Schriftfarbe**/
  font-size: 16px;					/** Schriftgröße**/
  background: #006600;				/** Hintergrundfarbe**/
  padding: 3px 6px 3px 6px;			/** Abstand zum Rand**/
  text-decoration: none;				/** Nicht unterstreichen**/
  text-align:center;					/** Zentriert**/
}
	/** Definiert die Link-Button Hover **/
.button-popup:hover {
  background: #009900;				/** Hintergrundfarbe**/
  color: #ffffff;						/** Schriftfarbe**/
  text-decoration: none;				/** Nicht unterstreichen**/
}
	/** Definiert wann und wie das Fenster eingeblendet wird **/
.einblenden {
animation-name: einblenden;
animation-duration: 1s;				/** Gesammte Zeit der Animation **/
animation-iteration-count: 1;			/** Anzahl der Wiederholungen **/
animation-timing-function: ease-in-out;
}
@keyframes einblenden {
from {transform:translate(0, -500px);}		/** Startposition **/
50% {transform:translate(0, -500px);}		/** Position nach 50% der Zeit (0.5 Sec) **/
85% {transform:translate(0, 50px);}		/** Position nach 80% der Zeit (0.8 Sec) **/
to {transform: translate(0, -0px);} 		/** Endposition **/
}
	/** Definiert wann Fenster ausgeblendet wird (Bildschirmbreite) **/
@media (max-width: 979px) {
#popup {
display:none;
}}

/********************* POPUP MOBILE-Ansicht *********************/
#popup-mobile {
  background:#006600;
  position:fixed;
  width:200px;
  left:10px;
  top:25px;
  padding:20px 10px;
  color:#fff;
  font-size: 14px;
  border-radius:5px;
  border-width:1px;
  border-style:solid;
  border-color:#fff;
  z-index:20000; 
}
#popup-mobile h2 {
  color:#fff;
  font-size:20px;
  font-weight:bold;
}
#close-mobile{
  position:absolute;
  background:#003300;
  color:#fff;
  right:-15px;
  top:-15px;
  border-radius:50%;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  font-size:15px;
  font-weight:bold;
  font-family:'Arial Black', Arial, sans-serif;
  cursor:pointer;
}
.button-popup-mobile {
  width:50px;
  border-radius: 7px;
  color: #006600;
  font-size: 14px;
  background: #fff;
  padding: 2px 4px 2px 4px;
  text-decoration: none;
  text-align:center;
}
.button-popup-mobile:hover {
  text-decoration: none;
}
	/** Definiert wann Fenster eingeblendet wird (Bildschirmbreite) **/
@media (min-width: 978px) {
#popup-mobile {
display:none;
}}
</style>

Quellcode markieren & kopieren

Quelltext

Diesen Code dort wo der Link erscheinen soll per Widget > Quelltext einfügen.

<div id="popup" class="einblenden">
    <div id="close">X</div>
		<h2>INFOFENSTER</h2>
		<div class="hintergrund">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<a class="button-popup" href="#">weiter</a>
		</div>
		<div class="hintergrund">
<p>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
		<a class="button-popup" href="#">weiter</a>
		</div>
				</div>
<script>

</script>

<div id="popup-mobile" class="einblenden">
    <div id="close-mobile">X</div>
		<h2>INFOFENSTER</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
		<a class="button-popup-mobile" href="#">weiter</a>
<hr>
<p>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
		<a class="button-popup-mobile" href="#">weiter</a>
				</div>
<script>

</script>

Quellcode markieren & kopieren