JQuery 对话框关闭

debugcn 发表于 Dev

用户8690818

我在 JQuery 中遇到对话框关闭问题

这是我的代码：

    $(window).on("click",function(e){
        if($(e.target).not("#test")){
            $("#test").hide();
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dialog open id="test"></dialog>
<input type="submit" onclick="$('#test').show()">

好吧，功能就像它应该的那样工作（当我在它的内容之外单击时关闭对话框）但是我无法再次切换它。因为功能，我想。

我也试图用这种方式修复它，但它也不起作用：

if($("#test").css("display","block")){
    $(window).on("click",function(e){
        if($(e.target).not("#test")){
            $("#test").hide();
        }
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dialog open id="test"></dialog>
<input type="submit" onclick="$('#test').show()">

有没有什么办法解决这一问题？

非常感谢您在我的问题上花费了宝贵的时间！

非常感谢您的任何帮助或建议！

不

您的submit点击事件首先触发，然后window点击事件触发。因此，您的对话框不断被隐藏。如果您想显示对话框，请确保您没有从提交按钮传播点击事件。

您可能想要添加验证以确保您的对话框在单击提交时尚未打开。

$(window).on("click", function(e) {
  console.log('window click');
  if ($(e.target).not("#test")) {
    $("#test").hide();
  }
});

$('input[type=submit]').on('click', function(){
  $('#test').show();
  event.stopPropagation();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dialog open id="test"></dialog>
<input type="submit" onclick="">

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。