如何用jQuery实现点击弹窗外部区域关闭Divi弹窗

我参考教程用Divi创建弹窗，但无法修改JavaScript代码实现点击弹窗外部区域关闭弹窗的功能。多次尝试修改后，StackOverflow提示代码提交过多。

JavaScript #

jQuery(document).ready(function($) {
    
    
    $('.dl-popup-content').each(function(){
        $(this).wrap('<div class="dl-popup-wrapper"><div class="dl-popup-inside">');
    });
        
        
    $('.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');
    });


});

CSS #

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

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<a href="#contact" class="dl-popup-trigger">Click here</a>
<div id="contact" class="et_pb_section et_pb_section_0 dl-popup-content et_section_regular">
  <div class="et_pb_row et_pb_row_0">
    <div class="et_pb_column et_pb_column_4_4 et_pb_column_0  et_pb_css_mix_blend_mode_passthrough et-last-child">
      <div class="et_pb_module et_pb_icon et_pb_icon_0 dl-popup-close"> <span class="et_pb_icon_wrap "><span class="et-pb-icon"></span></span> </div>
      <div class="et_pb_module et_pb_text et_pb_text_0  et_pb_text_align_left et_pb_bg_layout_light">
        <div class="et_pb_text_inner">
          <h4 class="center red">Popup Content</h4>
        </div>
      </div>
    </div>
  </div>
</div>

要实现点击弹窗外部区域关闭弹窗，需在现有JavaScript代码中添加两个关键逻辑：阻止弹窗内容的事件冒泡、监听外部容器的点击事件。修改后的代码如下：

jQuery(document).ready(function($) {
    
    $('.dl-popup-content').each(function(){
        $(this).wrap('<div class="dl-popup-wrapper"><div class="dl-popup-inside">');
    });
        
    $('.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();
        closePopup();
    });

    // 阻止弹窗内部点击事件冒泡到外部容器
    $('.dl-popup-content').click(function(e){
        e.stopPropagation();
    });

    // 点击弹窗外部区域时关闭弹窗
    $('.dl-popup-wrapper').click(function(e){
        if($(e.target).hasClass('dl-popup-wrapper')){
            closePopup();
        }
    });

    // 封装关闭弹窗的复用逻辑
    function closePopup(){
        $('.popup-is-visible').removeClass('popup-is-visible');
        $('body').removeClass('dl-noscroll');
        
        var PopupVideoIframe = $('.dl-popup-content').find('.et_pb_video_box iframe');
        var PopupVideoSrc = PopupVideoIframe.attr("src");
        PopupVideoIframe.attr("src", PopupVideoSrc);
        
        var PopupVideoHTML = $('.dl-popup-content').find('.et_pb_video_box video');
        PopupVideoHTML.trigger('pause');
    }

});

逻辑说明 #

• e.stopPropagation()：点击弹窗内部内容时，阻止事件向上传递到外部容器，避免误触发关闭
• 监听.dl-popup-wrapper的点击事件，仅当点击目标是容器本身（即外部背景区域）时，才执行关闭操作
• 将关闭逻辑封装成closePopup()函数，减少代码重复，提升可维护性

内容的提问来源于stack exchange，提问作者Bill