Question

我正在使用Jquery Modal对话框小部件，我正在尝试添加一个事件，当用户在Modal Dialog 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/>

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

关闭焦点时关闭模态对话框

2 个答案: