Divi
Divi is a WordPress theme and has great features. With this theme you hardly need any additional plugins in WordPress! Official website of Divi offers the possibility to create popups easily and without the use of an extra plugin. In this article you will find short and simple instructions on how to do this and what you need to do.
1st button: Class “popup”
Add the “popup” class to the button:
2nd section: “popup-overlay”
Add a section with the class “popup-overlay”.
3. the “popup-content” class
Then add the class “popup-content” with some padding to the column.
Then add a text module for the close symbol in the popup:
<span class="close-popup">x</span>Then add a text module to define the content of the popup.
Then insert this CSS to design the popup:
.popup-overlay {
position: fixed;
/* fixed it */
top: 0;
/* moves it to the top */
width: 100%;
/* makes it fullwidth */
height: 100vh;
/* makes it full height of the screen */
z-index: -1;
/* moves the section behind all the rest so it is not shown */
justify-content: center;
/* centers the row in the middle */
align-items: center;
/* centers the row in the middle */
opacity: 0;
/* hides the overlay */
overflow: hidden;
transition: opacity 0.4s ease-in-out;
/* fades it in */
-moz-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
background: rgba(0, 0, 0, 0.9);
}
/* CSS for overlay when shown */
.popup-overlay.show {
display: flex;
/* flex as this allows us to center the row */
opacity: 1;
/* shows the overlay */
z-index: 99999;
/* moves the overlay on top of all the other sections */
}
/* CSS X icon above the content */
span.close-popup {
color: #fff;
position: absolute;
top: -53px;
right: -32px;
font-size: 30px;
cursor: pointer;
}4. Add jQuery
jQuery is a fast, small and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation and Ajax much easier with an easy-to-use API that works in a variety of browsers. With a combination of versatility and extensibility, jQuery has changed the way millions of people write JavaScript. source mehr erfahren
Add the following jQuery
jQuery is a fast, small and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation and Ajax much easier with an easy-to-use API that works in a variety of browsers. With a combination of versatility and extensibility, jQuery has changed the way millions of people write JavaScript. source mehr erfahren to show, hide and trigger the popup when the button is clicked:
<script>jQuery(document).ready(function($ ) {
$(document).on('click', '.popup', function(event) {
event.preventDefault();
});
});
</script><script>jQuery(document).ready(function ($) {
$(document).on('touchstart click', '.popup', function(event) {
event.preventDefault();
$('.popup-overlay').addClass('show');
});
$(document).on('touchstart click', '.popup-overlay', function(event) {
$('.popup-overlay').removeClass('show');
});
$(document).on('touchstart click', '.popup-content', function(event) {
event.stopPropagation();
});
$('.close-popup').click(function() {
$('.popup-overlay').removeClass('show');
});
});
</script>5. add multiple popups on one page
It is possible to add several popups to a page.
To do this, you must duplicate all the above CSSCSS ( Cascading style sheets ) means “multi-level format templates” in German. CSS is a formatting language for HTML, SVG and XML documents. CSS is used to separate the content of a website from the design! There is more information here ., jQueryjQuery is a fast, small and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation and Ajax much easier with an easy-to-use API that works in a variety of browsers. With a combination of versatility and extensibility, jQuery has changed the way millions of people write JavaScript. source mehr erfahren and section files with column and module
6. duplicate & change the class names
You need to change the class names: Duplicate the section and then change the class names:
Button – popup2 (change the name accordingly)
Section – popup-overlay2
Column – popup-content2
Close button:
<span class="close-popup2">x</span>7. duplicate jQueryjQuery is a fast, small and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation and Ajax much easier with an easy-to-use API that works in a variety of browsers. With a combination of versatility and extensibility, jQuery has changed the way millions of people write JavaScript. source mehr erfahren & change the class names
Duplicate jQueryjQuery is a fast, small and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation and Ajax much easier with an easy-to-use API that works in a variety of browsers. With a combination of versatility and extensibility, jQuery has changed the way millions of people write JavaScript. source mehr erfahren and change the class names as above.
You should remove the jQueryjQuery is a fast, small and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation and Ajax much easier with an easy-to-use API that works in a variety of browsers. With a combination of versatility and extensibility, jQuery has changed the way millions of people write JavaScript. source mehr erfahren from this page and add it to Theme Option -> Integration so that no conflicts arise.
<script>jQuery(document).ready(function($ ) {
$(document).on('click', '.popup2', function(event) {
event.preventDefault();
});
});
</script><script>jQuery(document).ready(function ($) {
$(document).on('touchstart click', '.popup2', function(event) {
event.preventDefault();
$('.popup-overlay2').addClass('show2');
});
$(document).on('touchstart click', '.popup-overlay2', function(event) {
$('.popup-overlay2').removeClass('show2');
});
$(document).on('touchstart click', '.popup-content2', function(event) {
event.stopPropagation();
});
$('.close-popup2').click(function() {
$('.popup-overlay2').removeClass('show2');
});
});
</script>8. new CSSCSS ( Cascading style sheets ) means “multi-level format templates” in German. CSS is a formatting language for HTML, SVG and XML documents. CSS is used to separate the content of a website from the design! There is more information here . classes
Also create new CSSCSS ( Cascading style sheets ) means “multi-level format templates” in German. CSS is a formatting language for HTML, SVG and XML documents. CSS is used to separate the content of a website from the design! There is more information here . classes, these can simply be added to the others.
.popup-overlay,
.popup-overlay2 {
position: fixed;
/* fixed it */
top: 80px;
/* moves it to the top */
width: 100%;
/* makes it fullwidth */
height: 100vh;
/* makes it full height of the screen */
z-index: -1;
/* moves the section behind all the rest so it is not shown */
justify-content: center;
/* centers the row in the middle */
align-items: center;
/* centers the row in the middle */
opacity: 0;
/* hides the overlay */
overflow: hidden;
transition: opacity 0.4s ease-in-out;
/* fades it in */
-moz-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
background: rgba(0, 0, 0, 0.9);
}
/* CSS for overlay when shown */
.popup-overlay.show,
.popup-overlay2.show2 {
display: flex;
/* flex as this allows us to center the row */
opacity: 1;
/* shows the overlay */
z-index: 99999;
/* moves the overlay on top of all the other sections */
}
/* CSS X icon above the content */
span.close-popup,
span.close-popup2 {
color: #fff;
position: absolute;
top: -53px;
right: -32px;
font-size: 30px;
cursor: pointer;
}9. the finished result – an example on mbn.de
The result can look like this, for example:
On this website we have used the code to display the popup:
Dieser Beitrag ist auch verfügbar auf:
Deutsch (German)
Skip to content