单击网站中的任何位置时如何关闭弹出窗口答案

【问题标题】：How to close popup when click anywhere in website单击网站中的任何位置时如何关闭弹出窗口
【发布时间】：2021-06-13 13:58:52
【问题描述】：

当用户点击正文中的任意位置时，我想关闭弹出广告。

这是我的网站http://daplonline.in/。当用户点击网站中的任意位置时，我想隐藏或关闭广告。

这是弹出的html代码：

<div style="top: 100px; background-color: rgba(5, 5, 0, 0.7); display: block;" id="wd1_nlpopup" data-expires="30" data-delay="10">
    <div id="overlay">
        <a href="#closepopup" id="wd1_nlpopup_close">x</a>
        <div class="content">  
            <a href="buyonline.php"><img src="images/online_course.gif"/></a>
        </div>                  
    </div>
</div>

这是 JavaScript 代码：

<script type="text/javascript">
    $("body").click(function(){
        alert("me");
    });
</script>

【问题讨论】：

@PragneshChauhan 回答不够，请检查我的代码
@vivek 看到我的回答....您需要为覆盖添加点击事件处理程序...而不是正文...
使用事件委托，您甚至不需要叠加层，只需检查您的弹出窗口是否未被点击，这意味着必须点击外部的任何内容。

标签： jquery html css

【解决方案1】：

检查此代码 100% 工作和测试.. :)

$( document ).ready(function() {
$('#wd1_nlpopup_overlay').click(function() {

     $('#wd1_nlpopup_overlay').hide();
     $('#wd1_nlpopup').hide();
    });
});

【讨论】：

您的代码正在运行，我添加了<script type="text/javascript"> $(document).ready(function() { $("body").click(function(){ $('#wd1_nlpopup').hide(); $('#wd1_nlpopup_overlay').hide(); }); }); </script> 并且运行良好，谢谢

【解决方案2】：

您需要将选择器编辑到下方，

$(function(){
   $("#wd1_nlpopup_overlay").click(function(){
      alert("me");
   });
})

因为实际上您点击的是覆盖而不是正文。

现在由于此弹出窗口可能稍后会加载，因此您需要如下委托事件处理程序，

$(function()
{
    $(document).on('click',"#wd1_nlpopup_overlay",function(){
        alert("me");
    });
})

【讨论】：

谢谢你，但我不能看到并提醒当用户点击正文中的任何位置而不是关闭弹出图像时我想关闭广告
@vivek 查看事件委托代码并尝试...正如我所说，您的叠加层将主体隐藏在后面，因此您需要为叠加层点击添加代码....
@vivek 好吧好吧你有TypeError: $mainmenu.parent(...).get(...) is undefined 错误console 看到你的控制台..

【解决方案3】：

在我看来，给关闭弹出 btn 一个点击事件。你可以这样做：

$("#wd1_nlpopup_overlay").click(function(){
   $("#wd1_nlpopup_close").click(); // <--this will fire an event to the closebtn
});

【讨论】：

我更喜欢这种触发关闭按钮的点击事件的方法，而不是我的解决方案（隐藏）。

【解决方案4】：

试试

$('body').on('click', function(event){
    var popup = $('#wd1_nlpopup');
    if($(event.target).not(popup)){
        $(popup).hide();
    }
});

【讨论】：

【解决方案5】：

您好，您忘记了 jQuery 文档初始化程序。试试这个：

$(document).ready(function() {
    $("body").click(function(){
      $("#wd1_nlpopup_close").click();
    });
});

【讨论】：

【解决方案6】：

您可以使用隐藏或删除弹出窗口

$('#your-id').hide();

或

$("#your-id").remove();

【讨论】：

【解决方案7】：

http://jsfiddle.net/jasonday/xpkFf/ 如果点击任何地方，它将删除弹出窗口

$('#open').click(function() {
    $('#dialog').dialog('open');

});



$('#dialog').dialog({
    autoOpen: false,
    modal: false
});

// Close Pop-in If the user clicks anywhere else on the page
             jQuery('html') //set for html for jsfiddle, but should be 'body'
              .bind(
               'click',
               function(e){
            if(
             jQuery('#dialog').dialog('isOpen')
             && !jQuery(e.target).is('.ui-dialog, a')
             && !jQuery(e.target).closest('.ui-dialog').length
            ){
             jQuery('#dialog').dialog('close');
            }
               }
              );

【讨论】：