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% !important;
    top: 50% !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% to ensure the dialog window is in the center of the screen even if the page has been scaled.

 

Subscribe To Updates and Tips Via Email

Get tips on web development, WordPress, web design & more

8 replies on “Position A jQuery UI Dialog Window”

Hey there Arelthia,
I’ve gone this route too only with a responsive dialog popup. I have it set with:
left:0!important;
right:0!important;
margin:0 auto;

Works great in FF and Chrome… All versions of ie however will not center.

Hi Ben,

IE can be a pain sometimes. Thanks for sharing the way you did it with a responsive dialog popup. IE can be a pain sometimes, but I was reading somewhere that Microsoft is considering discontinuing IE.

Dear Arelthia Phillips,

I surf lot for this issue, but yours made me Amazing and Working as Expected.

Regards,
Mahesh M

Comments are closed.