Question

我正在玩jQuery UI。当用户单击body元素时，我想动态显示对话框。对话框显示时，我无法关闭它。此外，如果对话框在页面加载时显示，则可以关闭。

$("body").click(function(e){
   $("#dialog").dialog({
        title:"Title here",
        buttons:{
            Update:function(){$(this).dialog("close");},
            Cancel:function(){$(this).dialog("close");}
        }
    });
});

JSBin

知道我错过了什么吗？

Answer 1

希望这对你有所帮助。

使用此行if ($(e.target).find('#dialog').length !== 0) {})，我们会询问我们点击的元素是否不是我们的$(dialog)

$("body").click(function(e) {
  if ($(e.target).find('#dialog').length !== 0) {
    $("#dialog").dialog({

      title: "Tistle here",
      buttons: [{
          text: "Update",
          click: function() {
            $("#dialog").dialog("close");
          }
        },
        {
          text: "close",
          click: function() {
            $("#dialog").dialog("close");
          }
        }
      ]
    });
  }
});

body {
  height: 100vh;
  background-color: red;
}

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="dialog"></div>

无法关闭jQuery UI对话框

1 个答案: