Javascript 通过单击背景关闭覆盖_Javascript_Jquery_Html_Css

Javascript 通过单击背景关闭覆盖

javascript jquery html css

Javascript 通过单击背景关闭覆盖,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正试图通过单击外部实体来关闭覆盖窗口。问题是，即使我点击覆盖面板本身，或者点击我放入其中的任何其他元素（div、按钮、图标等），覆盖也会关闭我不知道如何只针对覆盖层周围的主体，而不是覆盖层窗口本身。你能帮忙吗下面是html标记和相关的JS <div id="main"> <div class"other-content">  </div> <!--

我正试图通过单击外部实体来关闭覆盖窗口。问题是，即使我点击覆盖面板本身，或者点击我放入其中的任何其他元素（div、按钮、图标等），覆盖也会关闭我不知道如何只针对覆盖层周围的主体，而不是覆盖层窗口本身。你能帮忙吗

下面是html标记和相关的JS

<div id="main">
    <div class"other-content">
        <!-- other content -->
    </div>
    <!-- The Modal -->
    <div id="myModal" class="modal">
        <!-- Modal content -->
        <div class="modal__content">
            <!-- some content - divs, buttons etc etc -->
        </div>
    </div>
</div>

这就是所谓的。因为模态是文档的子级，所以当单击模态时，事件会传播到任何父侦听器。这是我们的设计。要防止出现这种情况，可以在模式上使用

例如：

$( document ).on( 'click', function( event ) {
    $( '#myModal' ).fadeOut();
});

$( '#myModal' ).on( 'click', function( event ) {
    event.stopPropagation();
});

值得注意的是，通过停止事件传播，模态的父元素上的任何事件都将被阻止

是超级基本模态的一个示例。不过，老实说，您可能会从更好的模态设计和集成中获益。有一个变量来跟踪它的打开与否是好的。此外，背景中的覆盖可以作为唯一指定侦听器的元素。我不是说这是最好的方法。

使用

上的点击事件，使用检查元素

$('body').on('click',function(e) {
     var $currEl = $(e.currentTarget);
     if(!$currEl.is('#myModal') && !$currEl.closest('#myModal').length){
        $('#myModal').fadeOut();    
     }
     else if(/write code element which triggers modal open even/){
        $('#myModal').fadeIn(); //or any code to trigger modal open 
     }
});

$currEl.is（“#myModal”）

检查当前单击的元素是否为

myModal

$currEl.closest（'#myModal'）。length

检查

myModal

找到了一个有效的解决方案。见下文

   $(document).on('click',"#myModal", function(e) {
              e.preventDefault();

              if(e.target.id === "myModal"){
                $('#myModal').fadeOut();
              }
   });

您正在向整个文档添加一个

。在（'click'…）

上，我只需添加另一个layer div作为背景和触发器

我认为这里的每个人都想得太复杂了，（尽管事实上，关于事件冒泡等的东西是正确的）

既然你要求了一个替代方案，我就是这样做的：

<!DOCTYPE html>
<html>
<style>

body {
    background: #fff;
    font-family: 'Arial', sans-serif;
    color: #888;
}

#main {
    width: 960px;
    height: 600px;
    margin: auto;
    border: 1px solid #555;
    padding: 20px;
}

.other-content {
    background: #f1f1f1;
    border: 1px solid #f6f6f6;
    padding: 20px;
}

#myModal {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #545454;
}


.modal-inner-content {
    width: 300px;
    margin: 10% auto 0 auto;
    color: #666;
    padding: 20px;
    background: white;
}

</style>
<script>
// All pure, beautiful Vanilla JS
// This is only dumb toggle.. 1 and 0
function toggleModalWindow() {
// For scrollbar Handling
var body = document.getElementById('top')
// first, grab the id of the outer modal window
var modal = document.getElementById('myModal');
// Then get the "status" (open or closed) of that previously declared   variable
var status = modal.getAttribute('data-status');
    // Now we do simple if check if it is open or closed
    if(status === 'closed') {
    // Make the modal block, then manipulate it's opacity slowly
    modal.style.display = "block";
    // We hide the browser sidebar
    body.style.overflowY = "hidden";
    // don't forget to set the attributes again
        modal.setAttribute('data-status', 'open');
    } else {
    modal.style.display = "none";
    // show browser sidebar again
    body.style.overflowY = "visible";
    // don't forget to set the attributes again
    modal.setAttribute('data-status', 'closed');
    }
}

</script>
</head>
<body id="top">
<div id="main">
<div class"other-content">
    <h1>Awesome Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae saepe odio, labore ad, cum repudiandae non officia asperiores. Sequi porro magni corporis.</p>
</div>
<div class="other-content">
    <button onclick="toggleModalWindow();">show me that badASs modal</button>
</div>
<!-- The Modal -->
<div id="myModal" class="modal" data-status="closed" onclick="toggleModalWindow();">
    <!-- Modal content -->
    <div class="modal__content">
        <div class="modal-inner-content">
            <h2>Modal Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sapiente eius, asperiores ea mollitia velit accusamus soluta similique nobis modi obcaecati veritatis labore temporibus nulla, hic aliquid nam error!</p>
        </div>
    </div>
</div>
</div>
</body>
</html>


身体{
背景：#fff；
字体系列：“Arial”，无衬线；
颜色：#888；
}
#主要{
宽度：960px；
高度：600px；
保证金：自动；
边框：1px实心#555；
填充：20px；
}
.其他内容{
背景#f1f1；
边框：1px实心#f6f6f6；
填充：20px；
}
#myModal{
显示：无；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
宽度：100%；
身高：100%；
背景#5454；
}
.情态内部内容{
宽度：300px；
利润率：10%自动0自动；
颜色：#666；
填充：20px；
背景：白色；
}
//所有纯的，美丽的香草JS
//这只是一个愚蠢的开关。。1和0
函数toggleModalWindow（）{
//用于滚动条处理
var body=document.getElementById（'top'）
//首先，获取外部模态窗口的id
var modal=document.getElementById（'myModal'）；
//然后获取之前声明的变量的“状态”（打开或关闭）
var status=modal.getAttribute（'data-status'）；
//现在我们做简单的if检查它是打开的还是关闭的
如果（状态==‘已关闭’）{
//制作模态块，然后缓慢操纵其不透明度
modal.style.display=“块”；
//我们隐藏浏览器侧栏
body.style.overflowY=“隐藏”；
//不要忘记再次设置属性
modal.setAttribute（'data-status'，'open'）；
}否则{
modal.style.display=“无”；
//再次显示浏览器侧栏
body.style.overflowY=“可见”；
//不要忘记再次设置属性
modal.setAttribute（'data-status'，'closed'）；
}
}
精彩内容
Lorem ipsum dolor sit amet，奉献精英。作为一个非官方的国家，劳动和共和国。Sequi porro magni corporis
让我看看那个坏蛋
情态标题
Lorem ipsum dolor sit amet，奉献精英。智者的智慧之源，是一种类似于无生命劳动之源的软组织溶液，它是一种流动性错误

据我所知，您正在设计：

.具有100%宽度和高度的模态，位置固定。它也有不透明的背景，并通过更大的z-指数保持在一切之上
.模态内容，包含所有需要的内容，不同的背景颜色

请尝试以下代码以检测用户在模式内容内或模式内容外单击的位置

（函数（$）{
$（'.modal'）。在（'click'，函数（e）上{
//检查是否单击模态内容
如果（例如，目标！==此）
返回；
$（this.fadeOut（）；
});
})（jQuery）如何点击体外？很好，你找到了一个有效的解决方案，但请不要将其包含在你的问题中！把你的问题保留在问题中，然后在下面创建一个答案。@Jeremy，你说得对。对不起！不幸的是，这不起作用。它会打开覆盖层，然后立即将其关闭。有其他选择吗？@Beppe您可能需要重新打开选择器。试试我现在的，可惜还是不行。我这样做了，但是没有-->$（文档）。在（'click'，“#myModal”，函数（e）上{@Beppe仔细想想，添加选择器不应该让它起作用。如果您提供了负责模式的所有代码，那么可能会更容易找到委派事件处理程序，它将ID为#myModal
的元素和该元素的任何子元素作为目标。当这些元素是元素时，将这些元素作为目标毫无意义您不会为触发事件？不幸的是，这与Jeremy提供的以下解决方案不一样。它会打开覆盖，然后立即关闭。不明白为什么。有其他选择吗？您需要编写一个，否则..if
为模式打开事件编写代码。您可以在问题中添加触发模式打开的代码吗n、 我会根据你的想法更新我的答案，只需隐藏你的模式而不是淡出它，让你的用户满意。用户不关心转换，除非它能帮助他们理解h