Dialog Close Button Text

Make the jQuery UI dialog close button show text instead of an icon.

HTML

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

CSS

body {
    font-size: 0.8em;
}

JavaScript

$( "#dialog" ).dialog({
    
    // Run when the dialog is created.
    create: function( e, ui ) {
        
        // Get the dialog components we need to adjust.
        var $parent = $( this ).parent(),
            $button = $parent.find( ".ui-dialog-titlebar-close" ),
            $title = $parent.find( ".ui-dialog-title" );
        
        // Adjust the dialog title styles.
        $title.css( { width: "auto", margin: "0.44em 0" } );
        
        // Reconfigure the close button to show text, not an icon.
        // Also make style adjustments.
        $button.removeClass( "ui-dialog-titlebar-close" )
               .css( "float", "right" )
               .button( "option", {
                   icons: {primary: false},
                   text: true,
               });
    
    }
    
});