Divi Popup
This is a demonstration of a popup functionality for the Divi theme created by Ania Romańska from Divi Lover. You can copy the CSS and jQuery code from this article and watch a step-by-step walkthrough on how to recreate it.
/* Show/hide the popup overlay wrapper when „is-visible“ class changes, apply the CSS to frontend only */
body:not(.et-fb) .dl-popup-wrapper {
position:fixed;
z-index:990;
top:0;
right:0;
bottom:0;
left:0;
transition: all .5s cubic-bezier(.14,.06,.41,1.39);
opacity:0;
visibility:hidden;
}
body:not(.et-fb) .dl-popup-wrapper.popup-is-visible {
opacity:1;
visibility:visible;
}
/* Allow the content inside the popup wrapper to scroll */
.dl-popup-inside {
height:100%;
overflow-y: scroll;
}
/* Prevent Body from Scrolling when Popup is visible */
body.dl-noscroll {
overflow: hidden;
}
/* Center Align Popup Content inside the Section */
.dl-popup-content {
display:flex;
flex-direction:column;
justify-content: center;
}
.dl-popup-content .et_pb_row {
margin-top:0;
margin-bottom:0;
}
/* Adjust the position of the popup overlay for admin bar */
@media (min-width:600px) and (max-width:782px) {
body:not(.et-fb).admin-bar .dl-popup-wrapper {
top:46px;
}
}
@media (min-width:783px) {
body:not(.et-fb).admin-bar .dl-popup-wrapper {
top:32px;
}
}
/* Mave the popup on top of other elements */
.et_builder_inner_content.popup-is-visible {
z-index:99999;
}
/* Add a hand cursor to the close trigger element */
.dl-popup-close {
cursor:pointer;
}
/* Add Row animation when popup is triggered */
.dl-popup-wrapper.popup-is-visible .et_pb_row:not(.dl-popup-close) {animation:scale-in .5s cubic-bezier(.14,.06,.41,1.39) both; animation-delay: .5s; }
@keyframes scale-in{0%{transform:scale(0.3);opacity:0}100%{transform:scale(1);opacity:1}}
jQuery(document).ready(function($) {
$(‚.dl-popup-content‘).each(function(){
$(this).wrap(‚
‚);
});
$(‚.dl-popup-trigger, .dl-popup-menu > a‘).off().click(function(e){
e.preventDefault();
SectionID = $(this).attr(‚href‘);
$(SectionID).closest(‚.dl-popup-wrapper‘).addClass(‚popup-is-visible‘);
$(SectionID).closest(‚.et_builder_inner_content‘).addClass(‚popup-is-visible‘);
$(‚body‘).addClass(‚dl-noscroll‘);
});
$(‚.dl-popup-close‘).click(function(e){
e.preventDefault();
$(‚.popup-is-visible‘).removeClass(‚popup-is-visible‘);
$(‚body‘).removeClass(‚dl-noscroll‘);
var PopupVideoIframe = $(this).closest(‚.dl-popup-content‘).find(‚.et_pb_video_box iframe‘);
var PopupVideoSrc = PopupVideoIframe.attr(„src“);
PopupVideoIframe.attr(„src“, PopupVideoSrc);
var PopupVideoHTML = $(this).closest(‚.dl-popup-content‘).find(‚.et_pb_video_box video‘);
PopupVideoHTML.trigger(‚pause‘);
});
});
Get in touch
Sample Popup Content
Click the button below, or click the background behind the popup container to close the popup.