Remove Dialog Close Button Focus

The jQuery UI dialog close button is focused by default. This code removes the focus when the dialog is opened.

by Adam Boduch

HTML

<div id="dialog-modal" title="Basic modal dialog">
  <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>

CSS

body {
    font-size: 0.8em;
}

JavaScript

$( "#dialog-modal" ).dialog({
    height: 140,
    modal: true,
    
    // When the dialog is opened, move the focus off the button. This
    // causes the close button to trigger a click event when the space
    // key is pressed.
    open: function( e, ui ) {
        $( this ).siblings( ".ui-dialog-titlebar" )
                 .find( "button" ).blur(); 
    }
    
});