Closing Modal dialog on focusout

Question

I am using a Jquery Modal dialog widget and I am trying to add an event that will close the dialog when the user click outside of the Modal Dialog div, but currently, my Modal dialog is closing immediatly after it open.

Here a demo : 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" );
     });
  });

I seen a solution about my problem here : Click outside non-modal dialog to close but in this solution, the modal dialog is closing even when we click on the title bar.

score 3 · Accepted Answer · answered Oct 15 '13 at 23:37

3

You could set it to modal:true and use the .ui-widget-overlay as a target for closing.

Demo: http://jsfiddle.net/WYRtr/1/

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

answered Oct 15 '13 at 23:37

ahren

16,803
5
50
70

score 0 · Answer 2 · answered Oct 15 '13 at 23:45

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

Closing Modal dialog on focusout

2 Answers2