Can I make jquery dialog position independent of window size?

Question

I'm using the position attribute to fix a dialog in a certain position.

$('#red').dialog({autoOpen: false, resizable: false, draggable: false, 
    height: 600, width:550, position: [10, 150]});

I find that if the browser window is too small, the dialog doesn't pop up at (10, 150), but higher.

Is there a way to make sure it pops up at an absolute position regardless of the window size?

Answer 1

Looks like the dialog widget is trying to keep the dialog visible and overriding your position setting in the process. You could use the open event to force the issue. The structure of the dialog (without irrelevant classes and such) is like this:

<div class="ui-dialog">
    <div class="ui-dialog-titlebar"></div>
    <div id="red"></div>
</div>

so you could use an open handler like this:

open: function(event, ui) {
    var $dialog  = $(event.target);
    var position = $dialog.dialog('option', 'position');
    $dialog.closest('.ui-dialog').css({
        left: position[0],
        top:  position[1]
    });
}

Yes, it is a bit kludgy but it works and I don't see anything in the API that allows you to control the dialog's behavior when the dialog doesn't fit in the viewable area.

Demo: http://jsfiddle.net/ambiguous/L9Deb/

Answer 2

 $(window).height();
 $(window).width();

use the above properties of jquery.It will give you the windows size and you can adjust the position of your popup according to that.

And also read following link which will be also helpfull.

resolution of screen

windows height and width

Answer 3

if you are using CSS, you can achieve this by:

#red{position: absolute; top: 150px; left: 10px;}

css positioning renders according to browser window.

In your code, you first need to get the offset through jquery using $(this).offset. Once you have the offset, then you can assign the offset+position in position: [10,150] part.

Its better to use CSS for this purpose. Just open the dialog using the plugin and the rest can be taken care through css.

Hope this helps.

-Veno