Question

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

这是我的代码：

＆＃13;

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

＆＃13;

<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()">

＆＃13;

好吧，功能就像它应该的那样（当我点击它的内容时关闭对话框的内容）但是我不能再次切换它。由于这个功能，我想。

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

＆＃13;

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

＆＃13;

<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()">

＆＃13;

有什么方法可以解决这个问题吗？

你非常愿意把宝贵的时间花在我的问题上！

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

Answer 1

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

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

＆＃13;

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

＆＃13;

<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="">

＆＃13;

Answer 2

您不需要show或hide个功能，只需使用open property并将其更改为false或true。

＆＃13;

    $(window).on("click",function(e){
        if($(e.target).not("#test") && !$(e.target).is("#submit")){
            $("#test")[0].open = false; // or document.getElementById("test").open = false;
        }
    });

    $('#submit').click(function() {
       $('#test')[0].open = true; // // or document.getElementById("test").open = true;
    });

＆＃13;

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

＆＃13;

JQuery对话框关闭

2 个答案: