单击外地时关闭jquery对话框

Question

我有对话框，现在我想在单击外部对话框或将鼠标移出对话框时关闭对话框，我不知道为什么它不起作用，这是我的代码：

 <!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script text="langue/javascript">
$(document).ready(function(){
    $(".popup").click(function(){   
        $( "#dialog-message" ).dialog({
                     modal: true,
                     title: 'Detail',
                     buttons: {
                     Ok: function() {
                         $( this ).dialog( "close" );
                         }
                     },                                      
                }); 
    }); 

    $(".ui-widget-overlay").click (function () {
     $("#dialog-message").dialog( "close" );
    });
});
</script>
<body>
<div id="dialog-message"> 
</div>
<a href="#" class="popup">click</a>
</body>
</html>

非常感谢你

Answer 1

这是因为选择器“ .ui-widget-overlay”在该上下文中尚不存在。 您需要等待它存在。 您会看到，它实际上是在您打开对话框后才创建的。

一种快速修复是将click事件应用于文档，并过滤掉“ .ui-widget-overlay”选择器，如下所示：

$(document).on('click', ".ui-widget-overlay", function(){
    $("#dialog-message").dialog( "close" );
});

Answer 2

$(document).mouseup(function(e) {
  var alert_box = $(".ui-widget-overlay");
  if (alert_box.has(e.target).length === 0)
     $("#dialog-message").dialog("close");
});

当您在模式框外单击时，以上代码将关闭对话框

单击外地时关闭jquery对话框

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-01-02 15:27:31

解决方案2
0 2014-01-02 15:31:30

单击外地时关闭jquery对话框

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-01-02 15:27:31

解决方案2 0 2014-01-02 15:31:30

解决方案1
1 已采纳 2014-01-02 15:27:31

解决方案2
0 2014-01-02 15:31:30