Question

为什么div在div之外点击时没有关闭/隐藏。我在div之外点击时使用以下javascript来关闭/隐藏div。

$(document).mouseup(function (e)
{
    var container = new Array();
    container.push($('#openModal'));

    $.each(container, function(key, value) {
        if (!$(value).is(e.target) // if the target of the click isn't the container...
            && $(value).has(e.target).length === 0) // ... nor a descendant of the container
        {
            $(value).hide();
        }
    });
});

我要关闭的div标记正在关注。

<div id="openModal" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="close">X</a>
        <iframe src="//player.vimeo.com/video/84419229?autoplay=0" width="854" height="480" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
</div>

Answer 1

使用此

$("body").children().not("#openModal").on("click",function() {
  $("#openModal").hide();
});

修改

$(document).ready(function(){ $("body").children().not("#openModal").on("click",function() { if(!$('#openModal').is(':visible')) $("#openModal").hide(); }); });

虽然您的代码中已有$(document).ready()部分。你也可以把它放在里面

Answer 2

首先，你的代码有些奇怪，因为你正在将一个jQuery实例推送到数组（虽然这个实例类似于数组本身）只是迭代这个单jQuery实例数组。另外，每次事件处理发生时你都在重新创建这个数组，尽管DOM之间没有变化，是吗？

您也可以尝试类似于此的内容而不是代码：

var modal = $('#openModal > div');
$(document).mouseup(function( e ) {
    if ( !$(e.target).is(modal) ) {
        modal.hide();
    }
} );

但是直接在您的网站上尝试代码这对我有用：

$("#openModal").on("click",function() {
    if($('#openModal').is(':visible')) $("#openModal").hide();
});

它隐藏了你的#openModal，虽然它可能不会停止播放视频。你最终可能会减少它：

$("#openModal").on("click",function(e) {
    $(e.delegateTarget).hide();
});

将此放在像这样的DOMReady事件处理程序中将确保元素已经可用：

jQuery(function($){
    $("#openModal").on("click",function(e) {
        $(e.delegateTarget).hide();
    }); 
});

此外，这使您的代码更加灵活，不会干扰其他可能使用$进行快捷操作的库。

在div外部点击时，Div不关闭？

2 个答案: