Maximizing Dialogs

How to maximize a jQuery UI dialog widget by dragging it to the top left corner of the window.

by Adam Boduch

HTML

<div id="dialog" title="MyDialog">
    <p>My Dialog Content</p>
</div>

CSS

body {
    font-size: 0.8em;
}

.labels {
    display: flex;
    flex-direction: column;
}

JavaScript

$( '#dialog' ).dialog({
    
    dragStart: function( e, ui ) {
        
        var $this = $( this ),
            width = $this.data( 'prevWidth' ),
            height = $this.data( 'prevHeight' );
        
        if ( width && height ) {
            $this.removeData( 'prevWidth prevHeight' )
                .dialog( 'option', {
                    width: width,
                    height: height
                });
        }

    },
    
    dragStop: function( e, ui ) {
        
        var top = ui.position.top,
            left = ui.position.left,
            $this = $( this );
        
        if ( top !== 0 && left !== 0 ) {
            return
        }
        
        $this.data({
            prevWidth: $this.dialog( 'option', 'width' ),
            prevHeight: $this.dialog( 'option', 'height' )
        }).dialog( 'option', {
            width: $( 'body' ).width() - 4,
            height: $( document ).height() - 4
        });
        
    }
    
});