Javascript 单击outsite时关闭jquery对话框_Javascript_Jquery

Javascript 单击outsite时关闭jquery对话框

javascript jquery

Javascript 单击outsite时关闭jquery对话框,javascript,jquery,Javascript,Jquery,我有一个对话框，现在当我点击outsite dialog或move mouse out dialog时，我想关闭对话框，我不知道为什么它不能工作，下面是我的代码： <!DOCTYPE html> <html> <head> <title>Title of the document</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/theme

我有一个对话框，现在当我点击outsite dialog或move mouse out dialog时，我想关闭对话框，我不知道为什么它不能工作，下面是我的代码：

 <!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>


文件标题
$（文档）.ready（函数（）{
$（“.popup”）。单击（函数（）{
$（“#对话框消息”）.dialog({
莫代尔：是的，
标题：“细节”，
按钮：{
好的：函数（）{
$（此）.dialog（“关闭”）；
}
},                                      
}); 
}); 
$（“.ui小部件覆盖”）。单击（函数（）{
$（“#对话框消息”）。对话框（“关闭”）；
});
});

非常感谢

这是因为选择器“.ui小部件覆盖”在该上下文中尚不存在。你需要等待它的存在。你看，只有真正打开对话框，它才会被创建

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

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

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

尝试创建JSFIDLE！谢谢，它的工作，在任何方式，我们可以关闭对话框时，我们移动鼠标弹出？当然！只需将

'click'

更改为

'click mouseleave'

。这样，它会在

单击事件和鼠标移动事件中触发！谢谢，它可以工作，在任何情况下，当我们将鼠标移出弹出窗口时，我们可以为关闭的对话框工作吗？试试这个$（文档）.on（'mouseout'，'.ui小部件覆盖'，函数（e）{$（“#对话框消息”）.dialog（“关闭”）；}）
$(document).mouseup(function(e) {
  var alert_box = $(".ui-widget-overlay");
  if (alert_box.has(e.target).length === 0)
     $("#dialog-message").dialog("close");
});