Modernen Overlayer (Pop-Up) für die Webseite erstellen
Ich möchte euch zeigen, wie Ihr einen modernen Overlayer für Eure eigene Webseite mit Ajax erstellen könnt. Ich bin kein Freund von nervigen Pop-Ups und möchte hoffen, dass mein Beispiel-Code dafür auch nie missbraucht wird. Jedoch brauchte ich einen einfachen und eleganten Overlayer für eine One-Pager Seite in dem das Impressum und die Datenschutzerklärung geladen wird. Somit vermeide ich 2 Unterseiten und habe alles kompakt auf einer Seite und dank Ajax wird der Inhalt der 2 Seiten im Quelltext nicht geladen.
Keine Produkte gefunden.
So erstellst auch Du einen einfachen Overlayer für deine Webseite
Im folgenden Beispiel zeige ich Euch meine Lösung des eigenen Overlayer mit Ajax. Klickt dazu einfach auf „Open Wrapper“ und „see the magic“ 😉
- HTML
- JS
- CSS
Open Wrapper
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
schließen
jQuery(document).ready( function() {
jQuery('div#openwrapper div.btn').on('click', function() {
var dataFile = jQuery(this).attr('data-file');
wrapperClose();
if ( dataFile ) {
jQuery( 'div#thewrapper' ).addClass( 'active' );
$.ajax({
url : 'https://dev.revilodesign.de/wp-content/themes/revilodesign/' + dataFile + '.php',
dataType : 'html',
success : function (data) {
jQuery( 'div#thewrapper div.content' ).html( data + 'schließen' );
wrapperClose();
}
});
}
});
function wrapperClose() {
jQuery('div.wrapper-close').on('click', function() {
jQuery( 'div#thewrapper' ).removeClass( 'active' );
jQuery( 'div#thewrapper div.content' ).html( '' );
});
}
jQuery(document).keyup(function(e) {
if (e.key === "Escape") {
wrapperClose();
}
if (e.keyCode === 27) {
wrapperClose();
}
});
});div#openwrapper {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-content: center;
align-items: center ;
overflow: hidden;
}
div#openwrapper div.btn {
cursor: pointer;
display: table:
margin: 0 auto;
}
div#thewrapper {
width: 100%;
height: 100%;
position: absolute;
z-index: 999;
left: 0;
bottom: -110%;
background: rgba(0, 0, 0, 0.9);
padding: 24px;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-content: center;
align-items: center;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
div#thewrapper.active {
bottom: 0;
}
div#thewrapper div.wrapper-bg {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
left: 0;
bottom: 0;
}
div#thewrapper div.wrapper-cross {
width: 100%;
height: 100%;
position: absolute;
right: 8px;
top: 8px;
width: 48px;
height: 48px;
cursor: pointer;
z-index: 998;
}
div#thewrapper div.wrapper-cross span {
background: #fff;
width: 60%;
display: block;
height: 3px;
border-radius: 3px;
border-radius: 1px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
position: absolute;
left: 20%;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
div#thewrapper div.wrapper-cross span:nth-child(1),
div#thewrapper div.wrapper-cross span:nth-child(2) {
top: 22px;
}
div#thewrapper div.wrapper-cross span:nth-child(1) {
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
div#thewrapper div.wrapper-cross span:nth-child(2) {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
div#thewrapper div.wrapper-close-text {
display: inline-block;
cursor: pointer;
}
div#thewrapper div.wrapper-close-text:hover {
color: #4EB9EB;
text-decoration: underline;
}
div#thewrapper div.content {
background: #fff;
position: relative;
z-index: 999;
height: 80%;
overflow: auto;
padding: 24px;
width: 80%;
border-radius: 8px;
border: 1px solid #f0f3f9;
box-shadow: 0 4px 8px 0 rgba(46,43,56,0.16), 0 8px 16px 0 rgba(46,43,56,0.08), 0 16px 32px 0 rgba(46,43,56,0.04);
}Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Wie funktioniert die Overlayer Demo?
Mein Beispiel reagiert auf die Klasse div.btn (ihr könnt auch mehrere Divs mit der gleichen Klasse hinzufügen). Erfolgt ein Klick auf den Button lese ich den value von data-file aus. Dort hinterlege ich den Namen des Dokuments, wessen Inhalt später beim Klick geladen werden soll.
Anschließend lade ich die Datei via Ajax und gebe den Inhalt im div.content aus und füge noch ein div mit der Klasse wrapper-close an.
Wie schließe ich den Overlayer-Wrapper?
In meinem Overlayer Beispiel habe ich mehrere Möglichkeiten eingebaut, wie der Layer geschlossen werden kann.
- Klick auf das X oben rechts
- Klick auf den blauen Hintergrund
- Klick auf das zuvor hinzugefügte „schließen“ im content
Hinterlasse doch ein Kommentar
Schreibe ein Kommentar zu Modernen Overlayer (Pop-Up) für die Webseite erstellen
Wenn dir der Beitrag Modernen Overlayer (Pop-Up) für die Webseite erstellen gefallen hat oder du Kritik bzw. Verbesserungsvorschläge hast, dann würde ich mich freuen, wenn Du ein Kommentar hinterlassen würdest.