Responding To Dialog Open and Close Events

The outside world can respond to the open and close events triggered by the jQuery UI dialog widgets.

HTML

<div class="buttons">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
</div>

<div class="dialog" title="Sample Dialog Title">
    <input type="checkbox" id="chk"/>
    <p>Sample Dialog Contenxxxt</p>
</div>

CSS

body {
    font-size: 0.8em;
}

JavaScript

// Create button widgets that open the dialog.
$( ".buttons button" ).button().on( "click", function() {
    $( ".dialog" ).dialog( "open" );
});

// Listen for dialog events as they bubble up the DOM tree.
$( "body" ).on({

    // The dialog was opened, so check if it's a modal, and if
    // not, disable the buttons.
    dialogopen: function( e ) {
        if ( !$( e.target ).dialog( "option", "modal" ) ) {
            $( ".buttons :ui-button" ).button( "disable" );
        }
        
        $("#chk").click();
    },
    
    // The dialog was closed, so make sure our stuff is enabled.
    dialogclose: function( e ) {
        $( ".buttons :ui-button" ).button( "enable" );
    }
});

// Create a dialog instance.
$( ".dialog" ).dialog({
    autoOpen: false,
    modal: false    
});