Закройте всплывающее окно, щелкнув внешнюю область с помощью jQuery. ⇐ Jquery

[Anonymous]

С помощью этого руководства я работаю над созданием всплывающего окна с помощью Divi. https://divilover.com/divi-popup-withou ... -tutorial/ У меня возникли трудности с изменением javascript, чтобы закрыть всплывающее окно, щелкнув внешнюю область. Вот код: (Я попробовал много изменений, но StackOverflow жалуется, что я уже ввел слишком много кода.)

Код: Выделить всё

jQuery(document).ready(function($) {

$('.dl-popup-content').each(function(){
$(this).wrap('');
});

$('.dl-popup-trigger, .dl-menu-popup > 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');
});

}); 

Код: Выделить всё

/* 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}}

Код: Выделить всё

[url=#contact]Click here[/url]



 


[h4]Popup Content[/h4]

Подробнее здесь: https://stackoverflow.com/questions/791 ... ing-jquery