jQuery centers a Dialog in the center of the entire page, but not in the center of current window

StackOverflow https://stackoverflow.com/questions/21114305

Question

I have a pretty long page and a button at the very beginning of that page. By clicking on the button I open a jQuery dialog:

$("#createNew").click(function () {
    var button = $(this);
    $("#createGalleryDialog").dialog({
        modal: true,
        title: 'Choose a Folder',
        width: 400,            
        buttons: {
            "Create": function () {
                     //Do some magic here
            },
            "Abort": function () { $(this).dialog("close"); }
        }
    });

At the beginning of the page I have a div, that looks like that:

<body>
    ...
    <div id="createGalleryDialog">
        DialogContent
    </div>
    <a href="#" id="createNew">Add a new Gallery</a>
    ...
    some long content, that needs a scrollbar.
    ....
</body>

If I click on the link the dialog will open in the very center of the entire page, which means that it will jump to the middle of the page and places the dialog in the center.

I'd like to avoid that opening the dialog, causes the page to "scroll" to the middle of that page.

PS: Yes, I can of course position the dialog in relation to the button somewhere beyond it, but I'd like to have it right in the center middle of the windows (not the entire page)

Any ideas?

Thanks a lot Dominik

Was it helpful?

Solution

I actually figured out the issue: jQuery Dialog uses the height() method to place the dialog in the center, when I tried to read the height, it was provided wrong values, the reason for that was the wrong/missing Doctype decleration

I provided the proper <!DOCTYPE html> and it worked!

I found out, that the problem of the dialog correlates with the problem that is described here: http://eureka.ykyuen.info/2013/10/02/100-height-does-not-work-for-html5-doctype/

Hope this helps!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top