我正在尝试将jQueryUI对话框放置在单击以触发其打开的元素上方。
我已经尝试了以下方法,但它不起作用。
$(function() {
dialog = $( "#gridDialog" ).dialog({
autoOpen: false,
modal: true,
buttons: {
"Close": function(event, ui) {
dialog.dialog( "close" );
}
},
open: function(event,ui){
dialog.dialog( "option", "position", {at: "left top", of: event } );
}
});
});
您的方法的问题在于,您尝试将对话框定位在它自己的open()
方法中,该方法接收一个自定义的 jQuery UI 事件对象,该对象没有 jQuery UI position()
方法所需的pageX
和pageY
属性。
相反,如果在打开对话框之前在 click
事件处理程序中设置对话框的位置,则只需传递 this
或 click 事件对象作为属性选项position()
的值即可。
例如:
$("#dialog").dialog({
autoOpen: false
});
$(".box").click(function() {
$("#dialog").dialog("option", "position", {
at: "left top",
of: this // this refers to the cliked element
}).dialog("open");
});
.box {
width: 100px;
height: 100px;
background: dodgerblue;
}
#left {
float: left;
}
#right {
float: right;
}
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="left" class="box"></div>
<div id="right" class="box"></div>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>