CODEWITHSUNDEEP
javascriptjquery
Rob
Rob

Reputation: 3574

jQuery dialog position when scrolling down

I'm using this javascript/jQuery to open a dialog, however when I scroll down on the page and open another window after closing the first one, the window will open at my selection position, plus the position I scrolled down. When I try to move it around, it will keep jumping down, causing a very annoying result.

function showDialog(url) {

    dialogFrame = $('<iframe style="width:100% !important;" frameborder="0" id="Dialog" src="' + url + '" />').dialog({
        autoOpen: true,
        height: 500,
        width: 1000,
        title: 'myWindow',
        resizable: false,
        modal: true,
        position: {
            my: "center",
            at: "center",
            of: window
        }
    });
}

How can I prevent this behavior? It's probably the position : { } but what should it be?

Upvotes: 4

Views: 3148

Answers (1)

Raphael M&#252;ller
Raphael M&#252;ller

Reputation: 971

I had the same issues with a jQuery UI dialog when the body had the CSS property position:relative;. You might want to check if that is the case.

In my case I could not remove the position:relative; so I decided to override the top value and use a fixed positioning:

$(".dialogFrame").dialog({
    // ...
    open: function(event, ui) {
        $(event.target).parent().css('position', 'fixed');
        $(event.target).parent().css('top', '20px');
    }
    // ...
});

The script could be optimized by calculating the effective center of the screen.

Upvotes: 2

Related Questions