聚焦关闭模式对话框

Question

我正在使用一个Jquery模式对话框小部件，我试图添加一个事件，当用户单击莫塔尔对话框的外部时，将关闭对话框，但目前，我的模态对话框正在立即关闭它打开。

这里演示：http://jsfiddle.net/WYRtr/

HTML：

<div id='password_dialogue' title="Modification de mot de passe"> 

      <h3>Modifier votre mot de passe</h3> 

      <label>Mot de passe actuel :<span style='color:red;'> *</span></label><br/> 
      <input type='password' name='pwd' id='pwd' /><br/><br/> 

      <label>Nouveau mot de passe :<span style='color:red;'> *</span></label><br/> 
      <input type='password' name='newPwd' id='newPwd' /><br/><br/> 

      <input type='submit' name='validerPwd' value='sauvegarder' /> 

    </div> 
<button id='password'>Modifier mot de passe</button><br/> 

的Jquery：

$(function() { 

    $("#password_dialogue").dialog({ 
     autoOpen: false, 
     width:600, 
     height:400, 
     draggable: false, 
     resizable:false, 
     closeOnEscape: true, 
     show: { 
     effect: "blind", 
     duration: 1000 
     }, 
     hide: { 
     effect: "explode", 
     duration: 1000 
     } 
    }); 

    $("#password").click(function() { 
     $("#password_dialogue").focus(); 
     $("#password_dialogue").dialog("open"); 
    }); 

    $("#password_dialogue").focusout(function(){ 
     $("#password_dialogue").dialog("close"); 
    }); 
    }); 

我看到了我的问题就在这里解决方案：Click outside non-modal dialog to close但在这种解决方案中，模态对话框即使我们点击标题栏也会关闭。

Answer 1

您可以将其设置为modal:true并使用.ui-widget-overlay作为关闭的目标。

演示：http://jsfiddle.net/WYRtr/1/

$('body').on('click', '.ui-widget-overlay', function(e){ 
    $('#password_dialogue').dialog('close'); 
}); 

Answer 2

试试这个：

$(function() { 

    $("#password_dialogue").dialog({ 
     autoOpen: false, 
     width:600, 
     height:400, 
     draggable: false, 
     resizable:false, 
     closeOnEscape: true, 
     show: { 
     effect: "blind", 
     duration: 1000 
     }, 
     hide: { 
     effect: "explode", 
     duration: 1000 
     } 
    }); 

    $("#password").click(function(event) {  
     event.stopPropagation();  
     $("#password_dialogue").dialog("open"); 
     $("#pwd").focus(); 
    }); 

    $("body").click(function(){ 
     $("#password_dialogue").dialog("close"); 
    }); 
    });