Slide-in Popup

Ein einfaches Slide-in Popup nutzen

Auf dieser Seite poste ich meine Version eines Slide-in Popups. Schlicht, einfach und effektiv.

Schritt 1

Sektion (blau) erstellen und dieser die ID #bh-banner-info vergeben. Danach die Hintergrundfarbe erstellen und Deckkraft etwas reduzieren.

Schritt 2

Eine Spalte erstellen und ein Textmodul und nach Wunsch vielleicht ein schmales Bild (wie hier im Beispiel). Der Spalte (Row grün) die Klasse .bh-banner-row vergeben, damit wir das besser stylen können.

Schritt 3

Ein Blurb-Modul einfügen und da nur ein Icon wählen. Der Rest kann rausgelöscht werden, da wir nur ein Icon haben wollen, welches als Schliessen-Button missbraucht wird. Diesem Blurb-Modul vergeben wir die ID #bh-close-info.

#bh-banner-info {
 	position:fixed;
 	top:0;
	width:100vw;
	height:100vh;
	display:none;
	z-index:999999; 
}
.bh-banner-row {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 50%;
  padding: 30px 0 30px;
  -webkit-box-shadow: 0 20px 40px 3px rgba(0,0,0,.2);
  	 -moz-box-shadow: 0 20px 40px 3px rgba(0,0,0,.2);
  		  box-shadow: 0 20px 40px 3px rgba(0,0,0,.25);
  border-radius:10px;
}
	/* Tablets in Portrait-Modus zwischen (768-980px) */
	@media only screen and ( max-width: 768px ) {
	    .bh-banner-row {
		    width:90%
	    }
	}

#bh-close-info a {
  position:fixed;
  display:block;
  background:#E0044F;
  color:#fff;
  float:right;
  padding:8px 16px;
  text-align:center;
  border-radius:50px;
  right:-10px;
  top:-20px;
  cursor:pointer;
  -webkit-transition: all  ease-in-out .3s;
	   -moz-transition: all  ease-in-out .3s;
	     -o-transition: all  ease-in-out .3s;
			transition: all  ease-in-out .3s;
}

#bh-close-info a:hover {
	background:#00e28b;
}

<script>
(function($) {
  $(document).ready(function(){
    $('#bh-banner-info').delay(1000).slideDown();
	
	$('#bh-close-info').click(function(){
		$('#bh-banner-info').slideUp();
	});
  });
})( jQuery );
</script>