Demo 1 – Introduction
Check the next two sections to see how a Popup works.
- The first section (with the blue-ish background) is the Popup.
- The second section (with the yellow-ish background) contains a button that triggers the popup.
Popup
Investigate this Section and see the details in the „Advanced” tab: The CSS ID and CSS Class
Trigger
Below is a button with the URL set to #demo1. This URL triggers the Popup.
Edit the Module Settings of the button to see the URL in the „Link” section.
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.
Dark Background
Take a look at the close button in the top right corner: It only displays an Icon (without the rectangle frame) and the icon is light, to match the dark background of this 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
Demo 3 – JS API Samples
The Popups in this demo page contain a code module.
Review the contents of that code module, to get an idea on how to use the JS API to create custom triggers.
- Demo 1: Opens after 3 seconds
- Demo 2: Opens when scrolled down by 50px
- Demo 3: Customizes the Popup contents every time the Popup is opened
Visit our script generator for more samples (at the bottom) or to create your own custom Popup scripts.
Timed Popup
There is a Code Module in the right column →
Check its contents to see how this Popup is triggered after a 3-second delay.
Scroll-Triggered Popup
There is a Code Module in the right column →
Check its contents to see how this Popup is triggered once you scroll down 50 pixels.
Customize Popup Contents
There is a Code Module in the right column →
Check its contents to see how this Popup modifies the open counter value every time it’s triggered.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare, turpis at gravida semper, est ipsum eleifend felis, malesuada tempor urna leo interdum risus. Aenean porta feugiat placerat. Aenean malesuada pulvinar sapien sit amet fringilla. Vivamus quis odio pharetra erat hendrerit cursus vulputate et elit. Nullam tincidunt purus sit amet enim sagittis, vitae euismod elit convallis. Duis ut gravida ligula. Fusce eu mattis magna, et vehicula mauris.
Sed ut risus a dolor sagittis gravida. In tincidunt, erat tristique tempus tempus, lectus tortor convallis ex, a tempus sapien ante gravida libero. Pellentesque posuere, ligula eget euismod mattis, est libero interdum diam, hendrerit mollis mi ante vel lorem. Nam venenatis lacus sed velit porta, in rhoncus sapien tristique. Vivamus non maximus lorem. Curabitur dignissim odio ut ligula vehicula, id volutpat nulla posuere. Proin et odio imperdiet, gravida risus quis, dapibus sapien.
Ut sit amet enim interdum dolor varius interdum non rhoncus tellus. Fusce facilisis leo ut scelerisque sodales. Quisque non arcu ut neque ullamcorper volutpat ac id magna. In mattis, ex in semper tristique, ipsum justo imperdiet felis, sit amet fringilla lacus orci vitae tortor. Praesent vulputate dignissim quam, id eleifend dui porta a. Etiam faucibus nisi tellus, quis vulputate risus efficitur eu. Duis auctor viverra urna feugiat tincidunt. Nulla purus ante, dapibus ut sapien id, scelerisque tincidunt est. Donec quis tristique nulla. Nam ut ligula vel odio fringilla imperdiet. Proin pellentesque pellentesque sagittis. Ut eleifend eu dolor id fermentum. Morbi luctus tortor dolor.
Maecenas quis odio elit. Phasellus a facilisis lacus, ac venenatis est. Mauris dapibus ut risus ac imperdiet. In ut nisi ut est efficitur placerat sed quis metus. Aliquam diam nulla, congue aliquet aliquam ac, lobortis non ipsum. Mauris fringilla vulputate metus vel gravida. Maecenas laoreet sollicitudin elementum. Fusce pharetra felis malesuada dolor lacinia bibendum. Vestibulum gravida orci neque, quis interdum sapien vulputate et.
Pellentesque sed leo eget nibh gravida commodo. Suspendisse rutrum quam quis tincidunt viverra. Aliquam eget tortor dignissim, porttitor purus ac, sagittis orci. Sed vel facilisis est. Aliquam erat volutpat. Aenean in ligula ligula. Sed euismod ante at finibus aliquet. Integer tincidunt condimentum accumsan.
Cras iaculis condimentum diam non malesuada. Donec condimentum vulputate nulla pretium tempor. Praesent eu risus orci. Donec euismod iaculis luctus. In et odio eu ex vehicula viverra et at odio. Sed et nisi vel ligula aliquet fermentum. Nulla facilisi. Duis efficitur ac risus vitae iaculis. Sed nec diam purus. In quis ligula mollis, imperdiet ex ac, tincidunt nulla. Nam sollicitudin dictum scelerisque. Nulla vitae ipsum nec tortor viverra ultrices. Sed vitae consectetur mauris, eget aliquet elit. Mauris ac tempus erat, non consequat sapien.
Duis sed nibh ac tortor laoreet convallis eu fringilla quam. Integer imperdiet ac ipsum tristique convallis. Praesent quis maximus diam. In hac habitasse platea dictumst. Ut nibh risus, ultrices eget ultricies quis, aliquet pellentesque nunc. Cras tincidunt mollis mauris id luctus. Vivamus semper fermentum interdum. Aliquam vitae augue massa. Pellentesque pulvinar ante ut pulvinar vehicula. Nullam pretium justo erat, a mollis risus tincidunt sed. Phasellus vitae mattis ante, vitae mollis leo. Cras imperdiet bibendum est, vel mattis eros sollicitudin sit amet.
Vivamus sit amet enim molestie, vehicula velit et, maximus ipsum. Donec nulla tellus, placerat sit amet libero varius, porttitor interdum risus. Proin consectetur arcu nibh. Cras consequat arcu id scelerisque dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed et lacinia ex, vitae sodales orci. Sed tincidunt ante id nunc varius, ac commodo ante bibendum. Proin quis luctus magna. Sed ac nulla massa.
Morbi tincidunt at enim vitae commodo. Phasellus viverra odio ac pulvinar hendrerit. Sed consequat, orci ac suscipit elementum, justo ante molestie ante, et hendrerit mi sapien a nisi. Curabitur et auctor ligula, non ornare eros. Morbi rutrum pellentesque elementum. Vivamus vel nibh vel lacus mollis pulvinar. Duis lacinia, massa ac mattis cursus, nisi ipsum ultrices neque, ut euismod purus turpis id neque. Vestibulum dictum dapibus risus, vitae rutrum sapien consequat sed. Ut sed felis est. Praesent malesuada est velit. Mauris condimentum mauris vel sem sollicitudin cursus. Sed interdum augue sit amet sollicitudin ultricies. Nam nec risus porta, porta dolor ac, mollis quam. Fusce et sodales erat. Maecenas sed mi sed turpis imperdiet consequat. Integer ornare quam sed varius convallis.
Cras ex urna, fermentum vel faucibus ut, semper non ligula. Morbi placerat a lorem eu pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus vulputate sapien a orci venenatis, eu mollis magna facilisis. In laoreet id justo in pulvinar. Donec eu vestibulum lacus, vel elementum lorem. Fusce eleifend malesuada massa, sit amet pellentesque elit iaculis eget. In congue porttitor condimentum. Duis sollicitudin diam in erat dignissim consectetur. Morbi in quam tristique, porttitor nulla nec, pellentesque felis. Donec sem velit, ullamcorper ut tincidunt at, ullamcorper eu tellus. Vestibulum eu justo sit amet tortor semper semper ut convallis turpis. Nulla non turpis lacinia, luctus diam sit amet, volutpat ante.
Quisque placerat ante nec mi varius, in ultrices ligula fermentum. Curabitur non fermentum sapien. Pellentesque a blandit tortor. Duis tristique lacinia lorem eu rutrum. Phasellus vitae vehicula est. Pellentesque feugiat sit amet orci quis pharetra. Nunc porta cursus nisi vitae maximus. Maecenas turpis nisi, auctor at luctus ac, rhoncus non nisl. Donec elementum lorem a hendrerit vulputate. Praesent at imperdiet tortor. Integer elementum lorem ut euismod tincidunt. Etiam sed leo a dolor auctor mattis. Nulla consequat purus et mi porta finibus. Aliquam auctor congue lacinia.
Duis suscipit justo tellus, vel viverra purus accumsan a. Suspendisse quis auctor arcu. Phasellus tristique ex sed dictum tempor. Vestibulum a hendrerit nisi, vel aliquet nibh. Aliquam hendrerit quam vel enim imperdiet, non tempus orci gravida. Integer volutpat suscipit diam, eu pharetra metus. Proin nec erat quis orci faucibus placerat eget nec urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus tempus eget lorem ut accumsan. Proin dui magna, tincidunt sed eros nec, semper eleifend risus. Etiam aliquam nibh finibus, molestie risus non, efficitur justo. Nullam nec leo feugiat, congue mauris semper, suscipit est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut consequat, mauris vitae laoreet convallis, felis velit tincidunt purus, nec sagittis lacus felis vel sem.