Question

I currently have a dialog with a bunch of options defined. It is shown when the user clicks on a button. My dialog is defined as:

    $('#newIssueDialog').dialog({
        autoOpen: false,
        modal: true,
        closeOnEscape: true,
        draggable: false,
        resizable: false,
        width: 415,
        height: 175,
        position: {my: "top", at: "bottom", of: "#btnNewIssue"}
    });

This pops my dialog up, centered below my button.
What I’d actually like to do is pop the dialog below the button, but centered on my window.

Any ideas on how to do that?

Edit: Also, is it possible to take into account the position of the window relative to the document? As in, if there are scrollbars on the page and the user has scrolled the page vertically or horizontally, can we calculate the position of the button and where we are on the page so that it is still below the button and centered?

Answer 1

Instead of using my, at, of you can calculate the position yourself for the left and top like this:

$("#btnNewIssue").on("click", function() {
    var $button = $(this);
    var $dialog = $('#newIssueDialog');

    //var top = $button.position().top + $button.height() + ($button.outerHeight() / 2);
    var top = $button.position().top + $button.height() + (($button.outerHeight(true) - $button.height()));
    var left = ($(document).width() - ($dialog.outerWidth / 2)) / 2

    $dialog.dialog({
        autoOpen: true,
        modal: true,
        closeOnEscape: true,
        draggable: false,
        resizable: false,
        width: 415,
        height: 175,
        position: [left, top]
    });
});​

Using the basic HTML as example:

<div id="newIssueDialog"> My modal dialog</div>
<button id="btnNewIssue">Click Me</button>

​

DEMO – Positioning dialog below button but centred of window/document

I’m using document in the example above but you can use window instead if you want, there should be little to no difference.

Edit

Fixed an oversight whereby the border height, the padding and margin of the button was not included correctly.

I saved the fiddle without adding the deduction of the height from outerHeight(true) to include the borders, padding and margins of the button as well in case the button had any specified.

This:

var top = $button.position().top + $button.height() + ($button.outerHeight() / 2);

Should be this:

var top = $button.position().top + $button.height() + (($button.outerHeight(true) - $button.height()));

Demo has been updated as well.

Edit

However, I’m now running into an issue if scrollbars are present on
the page.

For the vertical scroll position, just deduct the current scrollTop() value at the end like this:

var top = $button.position().top + $button.height() + ($button.outerHeight(true) - $button.height()) - $(window).scrollTop();

For placing the modal in the middle horizontally you don’t need to change anything. The above code to calculate left seems to always work. However if it is an issue for you in your specific markup, please have a look at scrollLeft() which I would assume would work the same way in that you need to deduct it similar to:

var left = (($(document).width() - ($dialog.outerWidth / 2)) / 2) - $(window).scrollLeft();

or possibly

var left = ($(window).scrollLeft() - $(document).width() - ($dialog.outerWidth / 2)) / 2;

As said, the DEMO below doesn’t need it but if you do, move it around and see how it fits in.

Please note that if your button is close to the bottom of the screen
the modal will not be below the button as it cannot be off-screen
but it will align the bottom of the dialog with the bottom of the
screen instead. That is expected behaviour. You see though that if the
button has enough room below it the dialog will always be as expected,
just below the button.

DEMO – Including window scroll position
(You need to scroll down to get to the button and you can also scroll to the right to test it properly)