CSS-Fenster nach dem laden 2

CSS-Fenster nach dem laden 2

CSS-Code

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

<style>
#pop {
  background:#fff;
  position:fixed;
  width:200px;
  left:50%;
  margin-left:-100px;
  top:20%;
  padding: 0 20px 20px 20px;
  color:#000;
  font-size: 14px;
  border-radius:5px;
  border-width:1px;
  border-style:solid;
  border-color:#666;
  z-index:20001; 
}
#pop h2 {
  color:#fff;
  font-size:20px;
  font-weight:bold;
}
#close-pop {
  position:absolute;
  background:#666;
  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-pop {
  width:50px;
  border-radius: 4px;
  color: #666;
  font-size: 14px;
  background: #fff;
  border-width:1px;
  border-style:solid;	
  border-color:#666;	
  padding: 2px 4px 2px 4px;
  text-decoration: none;
  text-align:center;
}
.button-pop:hover {
  text-decoration: none;
}
	/** Definiert wann und wie das Fenster eingeblendet wird **/
.einblenden {
animation-name: einblenden;
animation-duration: 2s;				/** Gesammte Zeit der Animation **/
animation-iteration-count: 1;			/** Anzahl der Wiederholungen **/
animation-timing-function: ease-in-out;
}
@keyframes einblenden {
from {transform:translate(3000px, 0);}		/** Startposition **/
50% {transform:translate(3000px, 0);}		/** Position nach 50% der Zeit (0.5 Sec) **/
85% {transform:translate(-50px, 0);}		/** Position nach 80% der Zeit (0.8 Sec) **/
to {transform: translate(0, 0);} 		/** Endposition **/
}
</style>

Quellcode markieren & kopieren

Quelltext

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

Quellcode markieren & kopieren

code

X

INFOFENSTER

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

weiter

Startseite Datenschutz Impressum

© Zeta Producer V15 / Mario Groß

Alle hier aufgezeigten Codeschnipsel wurden mit dem Layout "Stripe Responsive" und in diesem Projekt getestet.

Ob diese in Euerem Projekt funktionieren müsst ihr testen.