Question

我显示一个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); 
});

现在，如果单击该网站，则每次运行最后一个功能。那就不好了。仅当模态/ div已显示时，我才能运行此功能？

尝试此操作无效

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

Answer 1

确定很多信息，您需要知道..但在这种情况下，并不是所有您需要的信息

第一个：：检查元素是否可见

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

第二个：：您可以使用slideUp()和slideDown()代替slideToggle()；

第3 ，以防止嵌套元素中的click事件

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

第4 位以跳过$(window)单击或$(document)单击。的模态。您可以使用下一个功能

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);
});

注意：在您的情况下，我认为您只需要使用第4个

仅在显示div时如何关闭div

1 个答案: