Create Divi popups easily and without a plugin

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

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 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 ., 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 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 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 & change the class names

Duplicate 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 and change the class names as above.
You should remove the 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 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)