Categories
jQuery

Position A jQuery UI Dialog Window

 

jQuery ui dialog

A modal dialog window is a popup dialog box that the user must interact with before they can return to content on the page. Since it is smaller than the page you have to tell it where to appear on the page. In the past when I had to position a jQuery UI Dialog I used the Position option.

$("#swipe-dialog").dialog({
    autoOpen: false,
    height: 300,
    width: 350,
    modal: true,
    open: function(event, ui) {
        
        [...code goes here]

        $(".ui-dialog-titlebar").hide();
    },
    position: {
        
            my: 'top', 
            at: 'top'
            
    },
    buttons: {
        Cancel: function() {
            $(this).dialog("close");
            $("body").unbind("click");
        }
    }
});
Position Option

The position option works as long as the user does not use the zoom feature on the browser or the zoom property in css. The position option does not adapt to zoom which causes the dialog to display partially off the page. To fix the problem I removed the position option.

$("#swipe-dialog").dialog({
autoOpen: false,
height: 350,
width: 350,
modal: true,
open: function(event, ui) {
[...code goes here]
$(".ui-dialog-titlebar").hide();
},
buttons: {
Cancel: function() {
$(this).dialog("close");
$("body").unbind("click");
}
}
});
No Position Option

Then I added CSS to the style sheet to position the jQuery User Interface Modal Dialog Window in the center of the screen.

.ui-dialog {
    left: 50{8c32082245623bb3220c26d1239a0c097ad541f2671e810714744311371cb95a} !important;
    top: 50{8c32082245623bb3220c26d1239a0c097ad541f2671e810714744311371cb95a} !important;
    margin-left: -175px !important; 
    margin-top: -175px !important; 
} 
Center jQuery UI dialog

Margin-left is set to 1/2 the dialog width option of 350. Margin-top is set to 1/2 the dialog height option of 350. You will need to change the margin-left and margin-top based on the width and height of your dialog window. The left value and top value are set to 50{8c32082245623bb3220c26d1239a0c097ad541f2671e810714744311371cb95a} to ensure the dialog window is in the center of the screen even if the page has been scaled.