3

I just downloaded jQuery 1.8.0, also with customized CSS and am trying to make a very simple jQuery dialog to work, however it won't center in the current viewport but in the parent element (body) and scrolls the viewport that the dialog box is in the center.

I included widget and position js files and checked that the path is correct. This is what I have:

<script src="js/js/jquery-1.8.0.min.js"></script>
<script src="js/js/jquery-ui-1.8.23.custom.min.js"></script>
<script src="js/js/jquery.ui.position.js"></script>
<script src="js/js/jquery.ui.widget.js"></script>

The HTML:

<div id="dialog-confirm" title="Empty the recycle bin?">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

The HTML is exactly copied from the jQuery website. And finally calling it:

var dialog_confirm=$( '#dialog-confirm' ).dialog();
dialog_confirm.dialog('open');

All solutions in these questions did not solve it for me:
Dialog box not positions center screen
jQuery center element to viewport using center plugin

Does anybody know how to solve this? Is this the standard behaviour of jQuery dialog? Seems strange to me, or am I mistaken?

Community
  • 1
  • 1
Helmut
  • 1,377
  • 1
  • 15
  • 25

2 Answers2

4

I experienced this upgrading from jQuery 1.7/jQUI 1.8.17 to jQuery 1.11/jQUI 1.9.2. (The dialog positioning had worked correctly before the upgrade.)

In my case the cause was an old doctype that was triggering quirks mode, which led to jQuery returning $(window).height as the height of the document instead of the viewport. Switching to the HTML5 doctype (<!doctype html>) fixed the problem.

Allie Jones
  • 41
  • 1
  • 4
2

If you can, try an older jquery version, like 1.7.x... this may fix it. It is not a common behaviour!

Chris
  • 3,756
  • 7
  • 35
  • 54