Ok, I don’t know if this was a test by Peter 🙂 but I found the fix for my case:
I removed the display:none; for the .popup-overlay and added the position: absolute; to it. Then I’ve added the position: fixed; to the .popup-overlay.show. Now it fixes the overlay when showed, and respect the absolute z-index of -9999, which was being ignored somehow!

I my case this was the solution.

.pop-up-overlay {
/* display: none; */
position: absolute;
top: 0;
width: 100%;
height: 100vh;
z-index: -9999;
justify-content: center;
align-items: center;
opacity: 0;
overflow: hidden;
transition: opacity 0.4s ease;
-moz-transition: opacity 0.4s ease;
-webkit-transition: opacity 0.4s ease;
}

.popup-overlay.show {
display: flex;
opacity: 1;
position: fixed;
z-index: 9999;
cursor: pointer !important;
backdrop-filter: grayscale(100%) blur(5px);
-moz-backdrop-filter: grayscale(100%) blur(5px);
-webkit-backdrop-filter: grayscale(100%) blur(5px);
}

As always thank you for all Peter’s knowledge share.

But I also noticed that if I don’t have the display: none; then it will stay over every other divs! So what could be the fix here?

Thank you Peter for all your efforts on helping the community.

I’ve followed your code and noticed that for some cases the transitions might not work since the display of .popup-overlay is set to none.
So I’ve commented it and the fades worked.

AMP.

Can you send me a URL so I can try see and help with CSS – it would be an overflow-y: auto CSS

I’m just struggling now to find a solution to be able to have this overlay and a scroll down possible in case the content is too big to show in just one screen. For example one long form.

Hi Lucas!

Thanks for the kind words. You could try setting the position to Absolute and then give it explicit Top and Right values.

If that does not work, maybe try the transform settings on the design tab and position it to the top/right.

Hope this helps!

Is there also a way to display the form in the top-right corner, right underneath the header?

I tried it using display: fixed and with top and right properties, but couldn’t make it work 🙂

Best (and happy new year!),

Lucas

Thanks, added it back 😀

You might want to add that back in. Fortunately watching your video showed me what I was missing and where.

I am a total newb at this and need your help with stopping the video when I close the lightbox. Should I add the video in as a Video Module or Code Module and then include the ID? And for the JQuery part how is this written out. Hope you can answer my question when you have a moment.

Send me a link to the website so I can see please?

Amazing – thanks so much for this! Glad you sorted it

Actually just figured it out. Gave the class popup-content to the row instead of the column.

You would need to alter the code to target or get the CSS class and then only open this – but this would require more thought and coding.

Maybe the solution for you if you do not know JS code – is to duplicate the click function for each pop up and change the css class for each

Hiya, I’m really trying to figure this out to make sure multiple popups work on the same page but I can only get it so all of the popups are triggered at the same time.

Do you know if it is possible to target the divi audio player button with this code?

I have tried but been unsuccessful so far.

Many thanks

Is there a way to have multiple overlays?
I have 6 buttons and each one has a different content that needs to be shown.

Hello,

nice code.

but i need to say that now all other buttons all over my homepage are not working anymore. doesnt matter they are linking to other pages or just “add to cart” buttons for example.

Do you have any help for me? 🙂

Hi,
Thanks for your answer 🙂
Here is what I have when I inspect the button: https://share.vidyard.com/watch/Bn2kgSERGEPjxoggAXUmWN?

Thanks for your help!

I checked and it works for me – can you right click and inspect – is there a JS error?

I have a problem though…
It popup is showing on a “normal” Chrome window, but it doesn’t show on an Incognito window.
See here: https://share.vidyard.com/watch/U4X2P3KhqnFSCG6a1gar3M?

How can I solve this?
Thanks

-I have create a section with some modules like text, image and two buttons

-I like to have the section shown as auto popup as soon site is visited (covering the hole display)

-One button should close section so that the page beneath can be seen now

-One button should redirect to a some other url

I would appreciate a lot for some help,

best regards,
Amir

https://martonservice1.hekko24.pl/test29/test2/

-> choose ” Hej, powiesz coś więcej ? “

Well done 😀 Have a great week

I had a problem with the scroll bar not showing for very long pieces of text, and I put

overflow:auto;

into the

.popup-overlay.show class

This seems to have sorted the problem.

Not quite sure what you are asking – as its all done in the Divi Builder you can add what you want in there 😀

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 😀

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?

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?

Any suggestions to me?

So the page where the popup appears is a private page that only the registered users can see it.

Hi Jual,

Not sure what you mean, are you asking where you add the CSS code?

Hi Laura

Thanks for the kind comment and really happy it helped you!

Have a great week.

Adding display:none to the .popup-overlay CSS easily fixed this, for anyone who encounters the same problem.

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!

Good to hear you figured it out.. It probably is so different to Elementor but Divi is amazing – stick with it 😀

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!

Yes you can use the Divi Builder to create the pop up – this is in the tutorial 😀

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.

Pleasure 😀 Keep it safe

.et_builder_inner_content {
position: relative;
z-index: auto;
}

if pop-up overlay doesn’t go over the header or footer.

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;

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.

not sure – we will try take a look when we can

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?

Click on Thomas Nørgaard “Read Bio” to see the popup overlay.

Thanks, glad you solved it!”

nvm i solved the problem. It was the z-index

nvm i solved the problem

Can you send a link? I think your header has a higher z-index than the page so this would be the problem.

What is your JS code?

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

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!

Yeah – simple is often best 😀

Wow – love it. I think its great to see people take and expand on the code we provide 😀 well done!

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.

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.

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

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.

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.

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

I agree, it won’t be great for your SEO Sandy (thanks Drew)

Google hates when this occurrs and it may hurt your seo.

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

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

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,,

Hi Beth, Check Laura’s comment

Hi Quentin, Check Laura’s comment

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 😀

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)

Better with the link… sorry

https://www.snext-solutions.com/

Hi! This the link to my website, if you can check.. Thank you!

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?

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.

Thanks, Quentin.

I am not sure – do you have a URL so I can see?

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?

Hi,

It doesn’t work. It will “stop” momentarily and then you will hear it start playing again in the background. 🙁

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

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

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?

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?

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

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.

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

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?

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. I massively appreciate that.

Can you try adding this CSS please?


#main-footer {
z-index: 99999;
position: relative;
}


This is strange. Let me spend some time to try work this out when I have a moment.

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

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

Looking at the CSS it should fade out too – either post the link to your site here or email su*****@di********.com so I can check

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.

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)

What do you mean ontop – do you mean above the header like a bar at the top?

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

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!

Thank you Sandy,

Glad you found it useful – will share this post on Social media as hopefully, it can help others too

Can you either send the link to your site here or email su*****@di********.com and I will take a look for you when I can.

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;
}


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.

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

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!