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 个答案: