Demo 2 – Sample Popups
No Close Button
By default, every Popup displays a close button in the top-right corner. In the section settings, you can choose not to display that button.
Dark Background
You can customize the built-in close button in two ways: You can remove the background rectangle and only display the close Icon, and you can invert the colors to make the button look nice on dark backgrounds. This demo applies both changes.
Modal Popup
A modal Popup cannot be closed “accidentally”: It ignores any click that is outside the Popup. You need to close the Popup via the Close Button (or the Escape-Key).
Custom Close Button
You can even create your own Close Button and hide the default one. This is simple, as you only need to add the CSS class “close” to any button/link inside the Popup. The element will be turned into a Close Button.
Sample Opt-In Form
In this example, we use a two-column layout inside the Popup: The left column displays an image module, and on the right side contains an email opt-in module.
We’ve also applied some styles to the section – like dark background color, a maximum width of 1080 pixels, and some other changes.
Documentation
You can see all those Popups live on our website at divimode.com/divi-popoup
Visit our website for more help, samples and use-cases.
No Close Button
This Popup does not have a close button in the top right corner.
To close this Popup, either press the ESC key on your keyboard or click somewhere outside the Popup.
Modal Popup
For this Popup we set the Option “Close on Background-Click” to No.
This creates a so-called “modal” Popup that can only be closed via the ESC key on your keyboard or a Close Button that is displayed in the Popup.
Custom Close Button
This Popup is a modal Popup that has no built-in Close Button.
So we have added a custom Close Button below, that you can use to close the Popup. By the way: You can style that custom Close Button in any way you like!
Close this Popup