Search code examples
javascriptjqueryscrollviewportjquery-dialog

jQuery dialog does not center in viewport but parent element

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?

Solution

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