1

Jquery Modal ダイアログ ウィジェットを使用しており、ユーザーが Modal Dialog div の外をクリックするとダイアログを閉じるイベントを追加しようとしていますが、現在、Modal ダイアログは開いた直後に閉じています。

ここにデモがあります: 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/>

Jクエリ：

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

ここで私の問題に関する解決策を見ました：非モーダルダイアログの外側をクリックして閉じますが、この解決策では、タイトルバーをクリックしてもモーダルダイアログが閉じます。

4

2 に答える 2

3

に設定して、終了のターゲットとしてmodal:true使用できます。.ui-widget-overlay

デモ: http://jsfiddle.net/WYRtr/1/

$('body').on('click', '.ui-widget-overlay', function(e){
  $('#password_dialogue').dialog('close');
});
于 2013-10-15T23:37:11.660 に答える