jquery - 在焦点输出上关闭模态对话框

Question

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

这里有一个演示：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/>

查询：

$(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" );
     });
  });

我在这里看到了关于我的问题的解决方案：单击外部非模态对话框以关闭，但在此解决方案中，即使我们单击标题栏，模态对话框也会关闭。

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

Try this:

$(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" );
     });
  });