Dialogs and URLs

Using URL hashes to identify and display jQuery UI dialogs.

HTML

<a href="#!dialog/about" title="About">About</a>
<a href="#!dialog/settings" title="Settings">Settings</a>

<div id="about" title="About"></div>
<div id="settings" title="Settings"></div>

JavaScript

$(function() {
    
    // A regex that looks for a dialog ID in the URL.
    var dialogRe = /^#!dialog\/(\w+)$/;
    
    // Create two dialog widgets.
    $( "#about, #settings" ).dialog({
        autoOpen: true,
        modal: true
    });
    
    // Listen for hash changes in the URL.
    $( window ).on( "hashchange", function( e ) {
        
        // Close any open dialog widgets.
        $( ":ui-dialog" ).dialog( "close" );
        
        // Setup some variables. The "match" variable
        // captures the dialog ID from the URL hash.
        var match = location.hash.match( dialogRe ),
            $dialog;
        
        // Only react if a dialog was found.
        if ( match ) {
            
            // Get the dialog, using the captured ID from
            // the URL hash.
            $dialog = $( "#" + match[ 1 ] )
            
            // Attach behavior to the dialog close event. If
            // the close button was clicked, we want to go back
            // in history.
            $dialog.dialog( "option", "close", function( e ) {
                if ( $( e.currentTarget ).is( ".ui-dialog-titlebar-close" ) ) {
                    history.back();
                }
            });
            
            // Open the dialog.
            $dialog.dialog( "open" );
            
        }
        
    });
    
    // Bootstrap the dialog display process. This
    // makes the dialog display if specified in the
    // URL, before the page is loaded.
    $( window ).trigger( "hashchange" );
    
});