3

I am opening a jQuery UI dialog on a click, I need the dialog to position on the center of the viewable portion of the screen/browser.

The default position of jQuery dialog positions the dialog on the center of the page:

position: { my: "center", at: "center", of: window }

but the page I have the dialog loading on is very long, with a scroll bar, so the dialog first appears half way down the page when I click on it.

Any ideas on how to center the dialog on the viewable portion of the screen?

Javascript for creating and opening jQuery UI dialog:

$(document).ready(function () {
    $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        title: "Item Edit",
        buttons: {
            "Save": function (e) {
                $('input#<%=btnSave.ClientID %>').click();
                $(this).dialog("close");
                location.reload();
            }
        }
    });

    $(".item").on("click", function () {
        var itemId = $(this).attr("itemId");
        var url = window.location.protocol + "//" + window.location.host + 
                  "/ItemEdit.aspx?itemId=" + itemId;
        $("#dialog").load(url);
        $("#dialog").dialog("open");
        return false;
    });
});

I am using jQuery 1.11.1 and jQuery UI 1.11.1, the fiddle demo below seems to work correctly, but the jQuery versions are not the same. The main idea is that when a vertical scroll bar is on the page, the default center positioning on the dialog does not work.

JSFiddle demo - http://jsfiddle.net/t2zf7xow/6/

scrummaster23
  • 33
  • 1
  • 5
  • Can you create a jsFiddle example? – j08691 Feb 20 '15 at 20:56
  • I have added a JSFiddle example. The example works correctly, but in an actual browser, with the jQuery versions I'm using it does not. – scrummaster23 Feb 20 '15 at 21:40
  • Hmmm well that's certainly a dilemma. Are you getting any errors in your browser console? – j08691 Feb 20 '15 at 21:41
  • I am not getting any errors in the browser console. When running my code in the actual browser, the jQuery dialog does center horizontally and vertically correctly, but the vertical alignment takes into account the entire window, and since the document is longer than just the screen, it has a vertical scroll bar. When I click the link to open the jQuery dialog, the vertical scrollbar positions itself exactly in the middle. So if I start at the top of the page and click the link, the page scrolls way down to the middle of the entire document. – scrummaster23 Feb 20 '15 at 21:45
  • 1
    In my case it was this: http://stackoverflow.com/a/28107538/1763732 Incredible but great – fabrigm May 10 '15 at 10:27

0 Answers0