在焦点输出上关闭模态对话框答案

【问题标题】：Closing Modal dialog on focusout在焦点输出上关闭模态对话框
【发布时间】：2013-10-15 23:32:42
【问题描述】：

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

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

查询：

$(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，但在这个解决方案中，即使我们点击标题栏，模式对话框也会关闭。

【问题讨论】：

标签： jquery modal-dialog

【解决方案1】：

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

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

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

【讨论】：

谢谢你，这正是我想要的

【解决方案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" );
     });
  });

【讨论】：