Introduction
Today we are going to show you how to create a pop-up overlay with the Divi Builder without using a plugin. We only use simple Jquery and CSS.
We have recorded an extensive tutorial on this, which I think will be helpful in teaching you jQuery / CSS as well as how to create the pop-up. Alternatively, we have it written down below.
1. Give your button/element a CSS class
The first thing is to give a class name to the element you want to click on that activates the pop-up. In our case we are giving it a class name of “popup”.
2. Add jQuery to target the button
The next step is to add some jQuery in Divi > Theme Options > Integrations > Add code to the < body > section. At first we are just going to check if the jQuery is working by preventing the link action and then alerting us that it has. See the code below
3. Create Pop-Up Section and add CSS classes
The third step is to create the pop-up section and add the modules we want. Add a new section and give it the class name “popup-overlay”, then on the column add the class name “popup-content”. The rest is up to you in terms of design, for the section (overlay) add a background colour. For the column we suggest adding a background colour too such as white and add padding of 40px for example to create spacing between the column and the modules.
4. Add CSS to overlay
We need to hide the section we just created and make it show when we add the class “show” using jQuery (step 5). We also need to make it fixed so when you scroll it stays, make it the height and width of the screen and position it above all the other sections. Below is the CSS and the explaination of each
5. Add jQuery to add “show” class & show/hide overlay
Finally we want to add the class “show” when you click on the element with the class “popup” (step 1).
We then want to remove the class “popup” when they click on the overlay but not the content. Below is the jQuery used
Finialise
That is it! This will now allow you to create a pop-up using the Divi Builder with no plugin. We hope this has been helpful and any questions please ask.
The element is perfect, I love the aspect of avoiding a plugin to accomplish this. The question I have is regarding the form you used. You sent this all to a form fill, but what if I simply want it to pop up my Calendly scheduler? Calendly provides you the CSS and javascript resources.
Not quite sure what you are asking – as its all done in the Divi Builder you can add what you want in there 😀
Hi, on desktop for me it works very fine, but to see the popup on mobile I have to hold the button otherwise the popup disappears…
Any suggestions to me?
So the page where the popup appears is a private page that only the registered users can see it.
Can you try change the code from
$(document).on(‘click’, ‘.popup’, function(event){
to be
$(document).on(‘touchstart click’, ‘.popup’, function(event){
Does it work?
Yeah thanks a lot for that trick!
But also with the new code it just works on desktop – but on mobile the pop up disappears instantly (the same issue like Funkman773)…
Any suggestions?
This is an issue with touch on mobile – try change to be touchend instead of thouchstart.
Sorry cant debug this too much as need to spend time on plugin dev 😀
can that code directly add to main element css code on modules ?
Hi Jual,
Not sure what you mean, are you asking where you add the CSS code?
Just a heads up that even though the overlay is invisible and at z-index: -1, it still covers my whole site and is clickable, thus blocking all my website content.
Adding display:none to the .popup-overlay CSS easily fixed this, for anyone who encounters the same problem.
Bless you for this post! T_T I have been looking SO long for a way to do this. I tried so many Javascript ways that didn’t work – they either didn’t open or they didn’t fade nicely. I found a JSON that did work but wouldn’t go away in the editor so I couldn’t see anything I was editing.
This is so nice and simple. Your instructions are easy to follow. The fade is lovely.
The X doesn’t work for me so I got rid of it. And I did need to read other people’s comments to see where I needed to put the CSS and JS because putting them in the page CSS section and Code block didn’t work. But aside from these small things, this is a perfect solution and I’m so grateful you shared it with is. Thank you!
Hi Laura
Thanks for the kind comment and really happy it helped you!
Have a great week.
this doesn’t seem to work. I copied and pasted everything exactly as described and nothing happens. The cursor doesn’t change to a hand when it rolls over the button, and nothing happens when I click on it. Something isn’t working with the jquery and I’m not good enough at this to figure it out. Nothing shows up in the dev tools console either for an error. What could I be missing?
Never mind, I figured it out. I was putting all the stuff in a row instead of a new section. I’m relatively new to divi and I pretty much hate it compared to the ease of Elementor. Argh. Your tutorial is good. Thanks!
Good to hear you figured it out.. It probably is so different to Elementor but Divi is amazing – stick with it 😀
Thanks for this tutorial, it saved my ass
Pleasure 😀 Keep it safe
add this code to your divi custom css:
.et_builder_inner_content {
position: relative;
z-index: auto;
}
if pop-up overlay doesn’t go over the header or footer.
I’ve put a video module with a URL to a youtube video in my popup. If I play the video and click the X the popup will close as expected but the video continues to play as I can hear the audio. any suggestions how to kill/stop the video?
Great Tutorial!
when I click the button, how can I take the user to the top of the page as it show the popup?
Can you give me an idea to solve this?
Thks!
Hi. I like your tutorial very much. Thanks for this.
How can I trigger the popup instead of a button on the page by a menulink? Any idea? Thanks for help. Chris
Hi. Like your tutorial very much. Thanks for that. My question:
I´d like to trigger the popup by a menulink. It works fine with a button on the page, but not if I put the class “popup” and the id “weinfinder” in the menu, where it should trigger. Any idea?
Thanks Christiane
I have a problem with the popup overlay on ipad. Everytime I click on the link that makes the popup overlay appear, the popup block changes color to gray instead of white (the intended bagground color) in 1 second where it after turns white again. I have tried to see if the same happens on iphone or on mac but it only happens on ipad from what i can tell.
Click on Thomas Nørgaard “Read Bio” to see the popup overlay.
Depending on how much you have scrolled on the page with the Ipad, the popup overlay also sometimes closes itself down immeadietly after you have clicked on the link. Is there something in the code I need to change?
not sure – we will try take a look when we can
The X doesn’t work when I try to close the window down which is weird. The cusor which I have defined to be a pointer when hovering the X is not working as well even tho I have copied all the code in my custom css. What could the problem be? Click on the “read bio” under john mortensen to see the popup.
nvm i solved the problem
nvm i solved the problem. It was the z-index
Thanks, glad you solved it!”
Great tutorial – thanks a lot for this. Just a question – the X to close the modal gets lost behind the header. It appears over the other elements on the page but it doesn’t go over the header. Not a coding expert but I tried increasing the z-index and it didn’t help. Any ideas? Thanks!
Can you send a link? I think your header has a higher z-index than the page so this would be the problem.
Oh wow, it worked. Well i’ll be.
Thanks for this! This is so much better and more flexible than using plugins!
I added the code you added in the comments to create a scrollable popup. It works great, but I switched the max-height to 100vh as I preferred the full screen height. The 80vh also looked wonky as the popup section overlay didn’t cover 20% of the page.
I ran into issues having more than one row in popup section so that I can build a complete layout using a variety of columns. Each row was placed side-by-side across the full screen. To fix this, I deleted all of the CSS for the X icon, then changed the display from flex to block in the CSS for overlay when shown.
I preferred not having the X anyway as most people realize they can click outside the content to exit, but I may also get rid of the CSS class (popup-content) in each row so that clicking anywhere closes the popup.
Wow – love it. I think its great to see people take and expand on the code we provide 😀 well done!
I ended up needing that X for phone as I was concerned people wouldn’t realize how to close the popup. At the top of the divi section, I added a row with text, typed in an X, added a border, then used sizing to make the box about 25px square to fit the x in and to right justify. I did not add the .popup-content CSS and I left the background color empty so that it appears to be floating above the popup. Adjust the spacing for the section and that row to nudge the X towards the top corner. Looks and works great!
This tutorial is great, i’ve got it working on a website but since I’ve changed it to a ‘Boxed Layout’ the popup is no longer centred and showing up on the right-edge of the screen. Is there any way to show centred again with keeping the layout of the site ‘Boxed’?
Great tutorial thank you. I am trying to use this for a login but every time I click into the login field the popup disappears. How can I fix this?
If you want to have more than one popup (say for a bio page for a leadership team), how do you call more than one class in JS?
You can give each “trigger element” a different class. Then change the line
$(document).on('click', '.popup', function(event){to open a different pop up.
hello, could you expand on this? what exactly needs to be changed? I keep getting the same overlay content even though I am changing the “popup” class to a different name. could you post sample code? thank you in advance.
I will look to see about adding to the tutorial to help you but at the moment I am very busy so cannot work on this now.
sorry
Hi, I’m struggling with this bit. I’ve set up different classes, tagged the corresponding section IDs and now each of my different buttons/triggers are loading all of the popups
What is your JS code?
Thank you so much for your tutorial and your video.
Is it possible to have a popup with fixed size and use a scroll bar if it has more content?
Yes you could use custom CSS for this.
Something like
.popup-overlay {
max-height: 80vh; /* 80% of the window height */
overflow: auto /* if content is bigger, show scrollbar */
}
I have not tested this code but this should help you on your way
Dear team,
Regarding the tutorial…
https://diviengine.com/how-to-create-a-pop-up-overlay-with-the-divi-builder-without-a-plugin/
I am confused with Step 5 as when I click on the link, nothing is happening.
Do I need to add script given in step 2 and step 5, both to ‘Integration’- ‘Add Code to the body’?
Also, you have mentioned class ‘“popup-overlay”, and class “popup-content”.
I have added ‘pop up class’ as CSS Class to the Section and CSS Class ‘popup-content’ to the column. Am I right here?
Lastly, is there a class called ‘Show’ also that I have to add somewhere?
Many thanks,,
1) You need to add the CSS into Divi > Theme Options > Custom CSS and the Jquery in the integrations tab. See here; https://www.youtube.com/watch?v=jS7iLFRCRd4
2) Yes but not “pop up class”, instead “popup-overlay”
3) Show gets added by the jQuery
I think the video will help you if you have not seen it
Hi,
Great tutorial on creating a popup without a plugin.
It works wonders. However, I’m trying to get the popup to stop the Vimeo video that I embedded in it.
I tried a few solutions on Stackoverflow but none seem to work.
Any ideas? Also, I think the method might be different if it’s a Youtube or Self-hosted Video?
Yes seems a little more complicated than YouTube – have you seen this one where you can kill the iframe? https://stackoverflow.com/questions/10401819/jquery-how-to-stop-vimeo-video-when-click
Hi,
It doesn’t work. It will “stop” momentarily and then you will hear it start playing again in the background. 🙁
Hi, thanks for your cool popup instruction. L‘ve used it to popup a divi video module. It works great! There is one small problem, when the user closes the popup without stoping/pausing the video, the video continues to play when hidden. Would it be possible to add a pause command to the jquery when the „show“ is deleted from the CSS?
Just before you close the popup you can add another line of jQuery to stop it. You need to target the video using a CSS class or ID
$('#video_id').get(0).stopVideo();Change ‘#video_id’ which the css target for your video
Hi,
thank you for the good instructions, I never used jquery and your video explains it very well, I learned a lot.
Igot your code working on my site , but I have one issue and one question:
Issue: the X is not showing up, CSS X is copied to Divi/ThemeOptions/General
Question: Is it possible to position the Popup near the calling button instead of in the center of the page. I’ve already made the section background transparent.
My page is http://www.ehtl.lu/po/ the button used for the popup is at the bottom of the page, the first one in a row of for buttons. I want to do the same for all the buttons. each one revealing a different section.
Thank you for your help.
Hi, glad it helped.
I can see the “x” for me. Did you fix this?
To position it right next to the button will be more complicated. We have a plugin “Divi Mega Menu” which you can do this with if you want
Thanks for helping me with this.
> I can see the “x” for me. Did you fix this?
A partial Yes, the X is supposed to be outside the poping element. In my page it was half in and half out, where the outer part could not be seen. Changing the position totaly outside made it disapear, giving it a top: -20 position made it visible inside the Row. I do not understand why I had to do this workaround. (during testing, my Background was not white or transparent. The part of the X outside the “Row” was hidden behind the background.
> To position it right next to the button will be more complicated.
Sorry to here that, and using the last click mouse pointer position to position the popup, would it be possible?
Hey!
So I know nothing about website design and I find steps 4 and 5 a little confusing. Where do I copy these codes? Thanks!
Hi Kris,
I can help you 😀
4) Add to: Divi > Theme Options > Custom CSS
5) Add to: Divi > Theme Options > Integration. Add this in the box named “Add code to the < body > (good for tracking codes such as google analytics)”
Hope this helps
Thanks! It sounds all simple. i did exactly what was explained and it does not work….
I successfully hide the entire popup but when i click on the button, it takes me back up to the top of the page.
Any idea why?
I am not sure. There is another way which I think is easier to do. Let me add this method on the post and let you know
The Popup works fantastic. One litte Problem: With the script above it looks like my footer is “behind” the popup. I cannot click on the links and the newsletter form. Any ideas to fix this issue?
Can you try adding this CSS please?
#main-footer {
z-index: 99999;
position: relative;
}
Frederik, I too had this problem. Changing the z-index of the main-footer didn’t help as then the footer overlay on top of the popup when I scrolled to the bottom.
What I did in css was add the following to .popup-overlay css
z-index: -10000; /* moves the section behind all the rest so it is not shown */
display: none;
Can this be adjusted to being on hover instead of on click?
Yes you can do this. Change the javascript to be the following. This will add the class on hover and then remove when out. You will need to customise it to also add the class when hovering over the pop up content too
This is fantastic Pete. Can imagine so many different ways to use this.
Thanks so much!
Thank you for this. Any suggestions on how to fade the pop up overlay out when click on x… similar to how it fades in?
Looking at the CSS it should fade out too – either post the link to your site here or email [email protected] so I can check
Due to the coronavirus, I need to display a notice on a medical site immediately when a user accesses the homepage that contains information on changes in protocol. It seems this would be easy with Divi, but it’s not the case. I found this tutorial. Is it possible to modify the approach to make a popup appear automatically on top of the homepage each time the URL is accessed? Here is one simple example. https://marinafortin.com Thank you! Sandy
Thank you Sandy,
Glad you found it useful – will share this post on Social media as hopefully, it can help others too
Hi – I have the same question that Sandy does, for sites that need a COVID-19 update: How can this be modified so that the popup appears immediately when the homepage is loaded? Any help is appreciated!
Yes you can do this.. Add the class “show” to the popup as well. So instead of it being “popup” it will be “popup show” (obviously without the speech marks)
I’d like to know this as well. Simply adding “show” to the popup class doesn’t work as the event is triggered by either a touch or click. I’ve tried various codes but none of them work.
Is it possible to modify the approach to make a popup appear automatically on top of the homepage each time the URL is accessed? Here is one simple example. https://marinafortin.com
What do you mean ontop – do you mean above the header like a bar at the top?
No like a popup that has the homepage in the background. I was able to accomplish this with the ET Bloom plugin by setting the mail client to HTML and leaving it blank. Here is the example. https://clearsclinic.com I will try the suggestion above to accomplish this without a plugin.
Google hates when this occurrs and it may hurt your seo.
I agree, it won’t be great for your SEO Sandy (thanks Drew)
HI,
Very Helpful, I’m trying to add appointments code in popup content. everything work fine but second click on content close the popup. How you can add Cross or close button but not on second click on content.
Best Regards Thanks Shelly
Can you either send the link to your site here or email [email protected] and I will take a look for you when I can.
Thank you for sharing all this information! It’s been super insightful. I’m running into two issues that I haven’t been able to work around yet (http://justin.somethingproper.com/)
1. When I initially go to the homepage and click on “Consulting” or “Speaking” in the main menu to open the overlay form, the overlay opens perfectly but when I click on the form, it closes. Now if I select “Consulting” or “Speaking” again to open the overlay form, I’m able to click into the form without any issues. It’s like something in the jQuery code is being triggered the first time the overlay opens but is fine afterwards.
2. The second issue I’m running into is trying to get the overlay to cover the Secondary Menu Bar at the very top.
Thank you again for sharing this info. I’ll keep trying to fix this problem on my own but I thought I’d try and reach out as well.
Hi Denver,
1) Very strange. I am not sure why as the class “popup-content” is added to the div so therefore it should stop it from closing it. Very strange
2) Try changing the CSS to be
.popup-overlay.show {
z-index: 99999999999999999999999;
}
Hi, Great instructions here. Really easy to follow. Very clear and super helpful.
However, I seem to have a similar issue to Denver above. My test page is here http://pmsfreedom.com/tester/. When I click on the Click Here button my overlay shows great. Then, when I click on the popup-content, the overlay show toggles off, unless I click exactly in the right spot in the input fields. Any subsequent click on the Click Here button and the pop up works correctly, only closing when I click outside of the popup-content area. When I reload the page it goes back to toggling off the overlay show when I click on the popup-content.
I have changed the popup-overlay.show z-index to 9999999 as recommended to Denver but still have the same issue. I was hoping you might be able to give me some guidance on this.
Big thanks for your work. Beth
This is strange. Let me spend some time to try work this out when I have a moment.
Thanks. I massively appreciate that.
Hi Beth, Check Laura’s comment
Hi, first of all, thank you very much for this tutorial! I just get into the jQuery world thanks to your video!
I have the same issu as Denver. When the popup popup and i first click on an text field, it closes but just once.
Do you have the solution?
Thanks, Quentin.
I am not sure – do you have a URL so I can see?
Sorry to answer late, my website is running localy for the moment. But I have the exact same problem as Beth on her test page.
Hi!
Thank you so much for this tutorial, I really appreciate it!
My website is not online yet, but I also encounter the same problem when I initially click on the content inside the popup, it closes. Did you by any chance find a solution for this?
Hi! This the link to my website, if you can check.. Thank you!
Better with the link… sorry
https://www.snext-solutions.com/
Hi Quentin, Check Laura’s comment
Thank you for this very helpful article.
I encoutered the same issue than Beth and Quentin and solved it by adding event.stopPropagation(); in
$(document).on(‘click’, ‘.popup’, function(event){ // when they click on the popup element
event.preventDefault(); // Prevent click through
$(‘.popup-overlay’).addClass(‘show’);
event.stopPropagation(); // Add class show to the overlay
});
(step 4)
Thanks Laura, I have been so busy with development and a new plugin I did not have time to solve this so very happy to hear you helped 😀
I realised my code had a slight issue – I have updated it now so it won’t have this issue. Please change your code to be the updated code
Hi, just read your post, because I really needed a pop-up function without using a plugin. And it works perfectly for me. At 4. I first added the CSS to the Overlay section CSS and got an error, so make sure you add it to the pages CSS.
Only bad thing about it is, as soon as you put in the CSS the overlay section also hides in the visual builder, so you always have to remove it to edit it 😀
Beside that great solution, thanks so much!
Thanks for the comment and great you have it working for you! Yes, you can add the CSS there or in Divi > Theme Options > Custom CSS.
I will try come up with a solution for the visual builder CSS for you and others
My workaround has been to temporarily add the number 1 at the end of the section CSS class (so popup-overlay1). This then breaks its connection with the code, allowing you to view the content for editing. Note that this also breaks the popup function for now.
You have to edit the section CSS class in the WP Edit Page view because the section is not visible in the page view, then you can switch to View Page and Enable Visual Builder. When you’re done editing, delete the “1” so that the popup functions work again.
Yeah – simple is often best 😀
Is there any other solution for the Visual Builder CSS? I use the popup on every page (global footer) and the customer wants to edit the pages himself and the workaround is too complicated for him.
Yes you can use the Divi Builder to create the pop up – this is in the tutorial 😀