问题:

I am trying to position dialog on the right of the anchor tag, but with no luck.

I checked the solutions at jQuery UI dialog positioning and neither seems to work.

function openDialog(row_index) {    var target = $('#note'+row_index);     $("#dialog_content_"+row_index).dialog({ width:150 },                                         { height:80 }).dialog('widget').position({                                                                       my: 'left',                                                                       at: 'right',                                                                       of: target                                                                      }); }

And this HTML

<a id="note10" onclick="openDialog('10')" style="cursor:pointer">0010</a>  <div style="display:none" title="Title 10" id="dialog_content_10">Row 10</div>

回答1:

Adding the top designation to the my and at attributes seems to work - assuming you meant to align to the top and to the right of the anchor (tested in Chrome 11.0.6 and IE9):

function openDialog(row_index) {    var target = $('#note'+row_index);     $("#dialog_content_"+row_index).dialog({ width:150 },                                         { height:80 }).dialog('widget').position({                                                                       my: 'left top',                                                                       at: 'right top',                                                                       of: target                                                                      }); }

Here is the jQuery page for testing the different positions.

EDIT:

Here is a fiddle showing it aligning on the right... maybe the issue is somewhere else in your CSS or html? As in the fiddle I've been testing using jQuery 1.5.1, jQuery UI 1.8.9 and the base theme CSS file.

回答2:

OOpps - my brother was using my PC and I submitted the solution as him rather than myself

The lazy mans way

//get reference to the element var target = $('#note'+row_index);  //add an empty span at the very end of the element [only once] if($('#note'+row_index+'_getPosition').length==0){    $(target).after('<span id="note'+row_index+'_getPosition"></span>')   }  // get position of newly inserted span var position = $('#note'+row_index+'_getPosition').position();  //finally call the dialog using position as below position : [position.left,position.top]

回答3:

The lazy mans way

//get reference to the element var target = $('#note'+row_index);  //add an empty span at the very end of the element [only once] if($('#note'+row_index+'_getPosition').length==0){      $(target).after('<span id="note'+row_index+'_getPosition"></span>')     }  // get position of newly inserted span var position = $('#note'+row_index+'_getPosition').position();  //finally call the dialog using position as below position : [position.left,position.top]

转载请标明出处:jQuery UI dialog positioning always on top right

文章来源: jQuery UI dialog positioning always on top right

标签

dialog

jquery

always