jQuery UI dialog box not positioned center screen

Question

I have a jQuery dialog box that is meant to position in the middle of the screen. However, it seems slightly off-center vertically.

Here is the code:

$('#add_box').dialog({
    autoOpen: true,
    width: 300,
    modal: true,
    resizable: false,
    bgiframe:true
});

Any ideas why this won't center?

How about a screen shot? Does it seem off-center, or *is* it off-center? — Matt Ball, Sep 23 '09 at 16:26
oh yeah, and people perceive the gap above an object larger than it really is. that's why some artists make the top gap shorter when framing. i wouldn't be surprised if the dialog guys did something similar for aesthetics. — geowa4, Sep 23 '09 at 17:16
You also need to set the height of the dialog to get the verticle correct when initialising — , Aug 13 '12 at 17:53

score 51 · Accepted Answer · answered Sep 24 '09 at 00:17

51

If your viewport gets scrolled after the dialog displays, it will no longer be centered. It's possible to unintentionally cause the viewport to scroll by adding/removing content from the page. You can recenter the dialog window during scroll/resize events by calling:

$('my-selector').dialog('option', 'position', 'center');

answered Sep 24 '09 at 00:17

Ken Browning

28,693
6
56
68

1

This solution did not solve the issue. This allowed the dialog to scroll in some cases, but is was not scrolling in a manner I would deem acceptable for a production level page. The scroll was very jumpy and in firefox was actually reversed scroll. The main reason for voting down is that the dialog still opens off screen. – Nick Benedict Jun 11 '12 at 15:17
3

My issue was that I was ajax loading / showing content after creating the modal window, so that it was not centered based on the content itself. – Steph Rose Aug 17 '12 at 14:04
used after the creation of dialog. Worked of me. – Imran Ali Apr 16 '15 at 03:43

score 35 · Answer 2 · edited May 16 '14 at 19:43

35

Are you adding jquery.ui.position.js to your page? I had the same problem, checked the source code here and realized I didn't add that js to my page, after that.. dialog magically centered.

edited May 16 '14 at 19:43

Andrew

4,953
15
40
58

answered Nov 11 '10 at 21:30

Eugenio Miró

2,398
2
28
38

2

You'll also need jquery.ui.draggable.js if you want to drag the dialog. – Matt Apr 01 '11 at 03:20
4

For anyone still looking for a solution, this is not relevant anymore. – Adrian May 29 '18 at 13:28
1

This is pretty example code that solve problem with vertical centering of JQuery UI Dialog. Solution is that if you miss vertical centering will not work properly. If you have in your HTML code this declaration it will work correctly ha ha !!! – user5332 May 26 '21 at 09:06
This saved me hours. I had deleted !doctype from the html tag and my modals would pop up below the screen window. – birchy Jul 15 '22 at 05:08

score 28 · Answer 3 · edited Feb 21 '12 at 15:47

28

Digging up an old grave here but for new Google searchers.

You can maintain the position of the model window when the users scrolls by adding this event to your dialog. This will change it from absolutely positioned to fixed. No need to monitor scrolling events.

open: function(event, ui) {
    $(this).parent().css('position', 'fixed');
}

edited Feb 21 '12 at 15:47

Mahmoud Gamal

78,257
17
139
164

answered Mar 25 '11 at 04:51

jfraser

300
3
7

coryvb123 · Answer 4 · 2018-01-12T18:54:20.060

14

I was having the same problem. It ended up being the jquery.dimensions.js plugin. If I removed it, everything worked fine. I included it because of another plugin that required it, however I found out from the link here that dimensions was included in the jQuery core quite a while ago (http://api.jquery.com/category/dimensions). You should be ok simply getting rid of the dimensions plugin.

edited Jan 12 '18 at 18:54

answered Apr 15 '11 at 15:10

coryvb123

412
1
6
12

3

Thank you, it seems there are many good, correct answers in this thread. This one happened to be the one that applied to me. – mockobject May 31 '11 at 15:47

score 11 · Answer 5 · answered Sep 24 '09 at 01:10

11

1.) The jQuery dialog centers in whatever element you put it in.

Without more information, my guess is that you have a body div with a margin or something of the like. Move the popup div to the body level, and you'll be good to go.

2.) If you dynamically add content to the div as you load it, centering will NOT be correct. Do NOT display the div until you have the data your'e putting in it.

answered Sep 24 '09 at 01:10

Stefan Kendall

66,414
68
253
406

2

Number 2 was what caught me out - I can't believe I missed that! Thanks! – Joseph Woodward Jul 28 '15 at 12:30

score 11 · Answer 6 · edited Jul 31 '20 at 12:50

11

Add this to your dialog declaration

my: "center",
at: "center",
of: window

Example :

$("#dialog").dialog({
       autoOpen: false,
        height: "auto",
        width: "auto",
        modal: true,
        position: {
            my: "center",
            at: "center",
            of: window
        }
})

edited Jul 31 '20 at 12:50

Nick Shaw

2,083
19
27

answered Jul 15 '14 at 13:46

Taksh

431
4
8

1

I believe you need to put `my` `at` `of` in a `position` object: $("#dialog").dialog({ autoOpen: false, height: "auto", width: "auto", modal: true, position: { my: "center", at: "center", of: window } }) – AndrewL Jul 24 '19 at 10:27
Fixed the example with @AndrewL's note – Nick Shaw Jul 31 '20 at 12:50
This saved me :) - Thanks so much! – Oct 21 '20 at 03:03

score 10 · Answer 7 · answered Oct 06 '12 at 19:43

10

Simply add below CSS line in same page.

.ui-dialog 
{
position:fixed;
}

answered Oct 06 '12 at 19:43

Raj

3,890
7
52
80

score 9 · Answer 8 · answered Apr 24 '14 at 11:16

9

To fix this issue I made sure my body height was set to 100%.

body { height:100% }

This also maintains the center position while the user scrolls.

answered Apr 24 '14 at 11:16

user781058

113
1
4

1

This was the culprit for me. – Jesse Adam Dec 30 '16 at 00:20

score 4 · Answer 9 · answered Dec 30 '13 at 20:31

This issue is often related to opening the dialog via an anchor tag (<a href='#' id='openButton'>Open</a>) and not preventing the default browser behaviour in the handler e.g.

$('#openButton').click(function(event) {
   event.preventDefault();
   //open dialog code...
});

This usually removes the need for any positioning / scrolling plugins.

score 3 · Answer 10 · answered Feb 09 '11 at 21:05

3

For me jquery.dimensions.js was the Culprit

answered Feb 09 '11 at 21:05

Eswar

31
1

This jquery.dimensions.js was part of the tooltip plugin i used and it caused the problem – Satya Jun 02 '12 at 07:03

score 2 · Answer 11 · answered Jan 03 '13 at 21:51

2

I was facing the same issue of having the dialog not opening centered and scrolling my page to the top. The tag that I'm using to open the dialog is an anchor tag:

<a href="#">View More</a>

The pound symbol was causing the issue for me. All I did was modify the href in the anchor like so:

<a href="javascript:{}">View More</a>

Now my page is happy and centering the dialogs.

answered Jan 03 '13 at 21:51

Jimbo

191
1
1
9

This fixed my situation as well. For me, on the initial open of the dialog, it scrolled to the top and then opened my dialog centered in the window. On any additional opens of the dialog, it opened the dialog centered in the window, and then scrolled to the top, leaving the dialog partially/all off page. Doing as suggested above prevented that scrolling to the top and all worked as expected. – eol May 09 '13 at 16:17

Sanjeev · Answer 12 · 2014-06-17T08:01:44.600

My Scenario: I had to scroll down on page to open dialog on a button click, due to window scroll the dialog was not opening vertically center to window, it was going out of view-port.

As Ken has mentioned above , after you have set your modal content execute below statement.

$("selector").dialog('option', 'position', 'center');

If content is pre-loaded before modal opens just execute this in open event, else manipulate DOM in open event and then execute statement.

$( ".selector" ).dialog({
open: function( event, ui ) {
//Do DOM manipulation if needed before executing below statement
$(this).dialog('option', 'position', 'center');
}
});

It worked well for me and the best thing is that you don't include any other plugin or library for it to work.

score 2 · Answer 13 · answered Oct 08 '20 at 10:56

$('#dlg').dialog({
    title: 'My Dialog',
    left: (parseInt(jQuery(window).width())-1200)/2,
    top:(parseInt(jQuery(window).height())-720)/2,
    width: 1200,
    height: 720,
    closed: false,
    cache: false,
    modal: true,
    toolbar:'#dlg-toolbar'
});

score 1 · Answer 14 · answered Feb 26 '13 at 10:06

None of the above solutions seemed to work for me since my code is dynamically generating two containting divs and within that an un-cached image. My solution was as follows:

Please note the 'load' call on img, and the 'close' parameter in the dialog call.

var div = jQuery('<div></div>')
                  .attr({id: 'previewImage'})
                  .appendTo('body')
                  .hide();
var div2 = jQuery('<div></div>')
                  .css({
                      maxWidth: parseInt(jQuery(window).width() *.80) + 'px'
                      , maxHeight: parseInt(jQuery(window).height() *.80) + 'px'
                      , overflow: 'auto'
                  })
                  .appendTo(div);
var img = jQuery('<img>')
                  .attr({'src': url})
                  .appendTo(div2)
                  .load(function() {
                      div.dialog({
                          'modal': true
                          , 'width': 'auto'
                          , close: function() {
                               div.remove();
                          }
                      });
                  });

Going to give a try. Showing the modal only after image loads successfully seems to be tricky. If it takes too long to load image, perhaps I should show some kind of 'loading..' message to save my user from being perplexed. — Sangam Uprety, Jun 07 '17 at 11:18

score 1 · Answer 15 · edited Jan 22 '16 at 10:34

$("#dialog").dialog({
       autoOpen: false,
        height: "auto",
        width: "auto",
        modal: true,
         my: "center",
         at: "center",
         of: window
})

This solution does work but only because of the newer jQuery versions ignoring this completely and falling back to the default, which is exactly this. So you can just remove position: 'center' from your options if you just want the pop up to be centered.

score 1 · Answer 16 · answered Oct 21 '17 at 14:18

1

I had to add this to the top of my HTML file: <!doctype html>. I did not need to set the position property. This is with jQuery 3.2.1. In 1.7.1, that was not needed.

answered Oct 21 '17 at 14:18

user2233706

6,148
5
44
86

score 1 · Answer 17 · answered Jun 02 '11 at 11:42

1

Just solved the same problem, the issue was that i did not imported some js files, like widget.js :)

answered Jun 02 '11 at 11:42

vach

10,571
12
68
106

score 0 · Answer 18 · answered Jun 11 '12 at 15:22

0

This is how I solved the issue, I added this open function of the dialog:

  open: function () {
                $('.ui-dialog').css("top","0px");                                
                    }

This now opens the dialog at the top of the screen, no matter where the page is scrolled to and in all browsers.

answered Jun 11 '12 at 15:22

Nick Benedict

547
1
3
12

If the page is bigger than the screen we don't see the dialog ! – ratm Mar 17 '17 at 16:21

score 0 · Answer 19 · edited Oct 28 '14 at 08:35

0

to position the dialog in the center of the screen :

$('#my-selector').parent().position({
                    my: "center",
                    at: "center",
                    of: window
});

edited Oct 28 '14 at 08:35

Gerard de Visser

7,590
9
50
58

answered Oct 28 '14 at 08:32

Omar Ben Salah

1
1

score 0 · Answer 20 · answered Nov 24 '14 at 10:12

0

I had the same problem, which was fixed when I entered a height for the dialog:

$("#dialog").dialog({
    height: 500,
    width: 800
});

answered Nov 24 '14 at 10:12

Carl

5
2

score 0 · Answer 21 · answered Dec 15 '14 at 13:16

0

You must add the declaration

At the top of your document.

Without it, jquery tends to put the dialog on the bottom of the page and errors may occur when trying to drag it.

answered Dec 15 '14 at 13:16

thedrs

1,412
12
29

score 0 · Answer 22 · answered May 14 '20 at 03:46

I was upgrading a legacy instance of jQuery UI and found that there was an extension to the dialog widget and it was simply using "center" instead of the position object. Implementing the position object or removing the parameter entirely worked for me (because center is the default).

score 0 · Answer 23 · answered Oct 27 '20 at 12:44

None of the above solutions worked for me. I will present below my scenario and the final solution, just in case someone has the same problem.

Scenario: I use a custom jQuery plugin to add a scroll bar to an HTML element that is located inside the Dialog box.

I used it as

$(response).dialog({
 create: function (event, ui) {
  $(".content-topp").mCustomScrollbar();
 })
});

The solution was to move it from create to open, like this:

$(response).dialog({
 open: function (event, ui) {
  $(".content-topp").mCustomScrollbar();
  $(this).dialog('option', 'position', 'center');
 })
});

So, if you use any custom jQuery plugin that manipulates the content then call it using the open event.

score 0 · Answer 24 · answered May 26 '21 at 09:08

0

Solved... Solution of this problem is missing declaration <!doctype html> in HTML code. If you have not this declaration there. Vertial centering of JQuery UI dialog were not working correctly.

answered May 26 '21 at 09:08

user5332

758
2
9
17

jQuery UI dialog box not positioned center screen

24 Answers24

Linked