javascript modal dialog aligning to middle of the page

Question

$("#divDisplayPopUp").dialog({
                autoOpen: false,
                modal: true,
                height: 436,
                width: 939,

            });

This code doesnt align the popup into the center of the page.

And its alignment differs in Firefox, IE and Chrome.

Can anyone suggest how to align it to the centre, irrespective of browser?

Thanks.

score 0 · Answer 1 · answered May 27 '14 at 06:08

0

Try this:

  $(function() {
    $( "#dialog" ).dialog({
      modal: true,
      autoOpen: false,
      draggable: false,
      resizable: false,
      closeText: "Close",
      height: 436,
      width: 939
    });

answered May 27 '14 at 06:08

Abhinab Kanrar

1,532
2
20
46

Hakan SONMEZ · Accepted Answer · 2014-05-27T06:58:18.840

0

I think this your answer.

$(document).ready(function(){ 
   var maskHeight = $(document).height();
   var maskWidth = $(window).width();

   $('#divDisplayPopUp').css('top', (maskHeight - $('#divDisplayPopUp').height()) / 2);
   $('#divDisplayPopUp').css('left', maskWidth / 2 - $('#divDisplayPopUp').width() / 2);
});

I use many times of this and never see any problem.

edited May 27 '14 at 06:58

answered May 27 '14 at 06:08

Hakan SONMEZ

2,176
2
21
32

where Should I add these lines of code? Is it in Ready Function ? – user2598808 May 27 '14 at 06:49

score 0 · Answer 3 · answered May 27 '14 at 06:15

0

Use jQuery UI postion.

$('#myDialog').dialog('widget').position({
    my:"center", 
    at:"center", 
    of:window
});

This Postioms your dialog in center with respect to window.

Here is the API Documentation .position()

answered May 27 '14 at 06:15

Shaunak D

20,588
10
46
79

javascript modal dialog aligning to middle of the page

3 Answers3