Jquery 如何仅在div为'时关闭div；显示

我显示一个div并通过单击关闭按钮将其关闭。另外，如果单击位于此之外，则应隐藏模式。我用这个代码来做这些

$('.openModal').on('click', function() {  $('#Modal').slideToggle(1000);});


$('.close').on('click', function() {  $('#Modal').slideToggle(600); });

// When the user clicks anywhere outside of the modal, close it
$(window).click(function(e) {
        $('#Modal').slideToggle(600); 
});

现在，最后一个功能将在每次点击网站时运行。那不好。仅当已显示modal/div时，如何运行此功能

试试这个不行

if($('#Modal').is(':visible')){ $(window).click(function(e) {
            $('#Modal').slideToggle(600); 
      }); }

---

好的，你需要知道很多信息。。但在这种情况下，并不是所有你需要的

1st:检查元素是否可见

if($(el).is(':visible'))

2nd:您可以使用

slideUp（）

和

slideDown（）

而不是

slideToggle（）

3rd以防止嵌套元素中的单击事件

$(el).on('click' , function(e){
   e.preventPropagation()
})

4th从

$（窗口）

单击或

$（文档）

单击跳过模式。。您可以使用下一个函数

function OnwindowClick(elem , action){
    $(document).on('click',function(e){
        if (!$(elem).is(e.target) // if the target of the click isn't the container...
            && $(elem).has(e.target).length === 0) // ... nor a descendant of the container
        {
            action();
        }
    });
}

然后像这样使用这个函数

OnwindowClick('#Modal', function(){
   $('#Modal').slideUp(600);
});

注意：对于您的情况，我认为您只需要使用第四个

---

为什么不在单击窗口时使用

slideUp（）

而不是

slideToggle（）

。。您需要在点击事件中使用

e.stopPropagation（）

，用于

#Modal

为什么不在```$（窗口）中进行检查。如果显示了具有.openModal类的元素，请单击函数？为什么slideUp优于toggle？@RainerS这与是否更好无关。。这取决于每种代码的情况。。在您的情况下，

slideToggle（）

将在每次单击文档时启动。。因此，你的模式将保持开放和Hidethak解释我，我更新了一个trie隐藏代码，如果它是可见的，你能告诉我为什么它不工作？你的第四个解决方案和我的第一个解决方案有同样的问题。每次单击时调用的函数（如果我是wright）@RainerS单击内的if语句不在其外部，或者我可能是tierd，你能告诉我我做错了什么吗？@RainerS

$（document）。on（'click'，function（）{if（$（'.#Modal'）。is（':visible'）{//code here}）

if语句应该在click事件内部，而不是外部。。但正如我在回答中所说。。你需要我的第四点answer@RainerS即使在点击

#model

时，文档点击也会触发，因为您需要点编号4来防止这种情况发生