Logo Questions Linux Laravel Mysql Ubuntu Git Menu

Positioning jquery ui dialog box

How to position jquery ui dialog box with respect to a div element inside the body?

like image 869
rdp Avatar asked Jan 08 '11 10:01


People also ask

How to set position of dialog box in jQuery?

Syntax: $( ". selector" ). dialog({ position: { my: "left top", at: "left bottom", of: button } });

How to set position of an element in jQuery?

position() method allows us to retrieve the current position of an element (specifically its margin box) relative to the offset parent (specifically its padding box, which excludes margins and borders). Contrast this with . offset() , which retrieves the current position relative to the document.

What is the difference between position and offset in jQuery?

Although both methods have some similarities, but the jQuery offset() method is different from the jQuery position() method. The offset() method retrieves the current position relative to the document, whereas the position() method retrieves the current position of an element relative to the parent element.

What is jQuery ui dialog?

The jQuery UI dialog method is used to create a basic dialog window which is positioned into the viewport and protected from page content. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default. Syntax: You can use the dialog ()method in two forms: ADVERTISEMENT.

1 Answers

Perhaps this might get you the idea how to do it:


<div id="one" class="divs"></div>
<div id="two" class="divs"></div>


.divs {
    float: left;
    height: 48px;
    width: 80px;
    border: 1px solid #55f;


    var $div = $('#two');
    var left = $div.offset().left;
    var top= $div.offset().top;
    $('<p>Some dialog</p>').dialog({position: [left + 20, top + 20]});

Here is the link to demo.

jQuery offset() returns element postion relative to document, while position() returns relative to offset parent.

like image 116
Ivan Hušnjak Avatar answered Sep 26 '22 20:09

Ivan Hušnjak