Adding a Popup Window to Divi Without Plugins

by Naghmeh | Mar 19, 2024 | Divi tutorial

Adding a Popup Window to Divi Without Plugins

Learn how to effortlessly incorporate a popup window into your Divi website without relying on plugins. This step-by-step tutorial guides you through the process with easy-to-follow instructions, enabling you to enhance user engagement and functionality seamlessly.

Step 1 :

Add a new section. Inside that, we need a row with 2 columns.

Section setting :

width : 50% width
alignment : center
top and bottom padding : 0

Row setting:

Max width : none
Width: 100%.
gutter width : 1
and equalize column heights
top and bottom padding : 0

Step 2 :

Add an image module to column 1
change background colour of module 2 to black

Step 3 :

1-Insert your opt-in form

2-Add an icon above the opt-in form with the following specifications:

Icon: Cross
Color: White
Size: 30px
Alignment: Right
Top Margin: 20px
Right Margin: 40px

3- Additionally, add a button underneath the opt-in form with the following specifications:

Alignment: Center
Text Color: White
Border: None

Step 4 :

We need to bring the section on top of all other sections. To achieve this, we should change the position to fixed. To do that, go to the section settings, then navigate to the Advanced tab. Under Position, select ‘Fixed’ and set the location. Additionally, set the z-index to 100.

Step 5 :

Now, we need to add an animation effect to the section so that it operates and looks like a popup window. To achieve this, go to the Design tab and select Animation.

Animation Style: Fade
Duration: 200
Delay: 2000

Step 6 :

THE FUN PART 🙂

Adding JavaScript code

We need to add some JavaScript code to make the closing buttons interactive. To do this, create a new section, insert a row inside it, and then insert a code module. Copy and paste the following code into the code section:

JavaScript code



// Include jQuery library
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function() {
    // Functionality to handle click event on the close button
    $(".closeBtn").on("click", function(event) {
        event.preventDefault(); // Prevent the default behavior of the button click
        console.log("Button clicked, preventing default behavior.");
        myFunction(); // Call the custom function myFunction
    });

    // Custom function to hide the popup
    function myFunction() {
        var myDiv = $("#myPopup"); // Select the popup element by its ID
        myDiv.hide(); // Hide the popup element using jQuery hide() method
        // Alternatively, you can use: myDiv.css("display", "none");
    }
});
</script>