Question

我试图将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 } );
    }
  });           
});

Answer 1

您的方法存在的问题是，您正试图将对话框置于其自己的open()方法中，该方法接收自定义jQuery UI 事件对象，没有jQuery UI position()方法所期望的pageX和pageY属性。

相反，如果您在打开它之前在click事件处理程序中设置对话框的位置，则只需传递this或单击事件对象作为值position()选项＆＃39> 属性。

例如：

＆＃13;

 $("#dialog").dialog({
   autoOpen: false
 });
 $(".box").click(function() {
   $("#dialog").dialog("option", "position", {
     at: "left top",
     of: this // this refers to the cliked element
   }).dialog("open");
 });

＆＃13;

.box {
  width: 100px;
  height: 100px;
  background: dodgerblue;
}
#left {
  float: left;
}
#right {
  float: right;
}

＆＃13;

<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>

＆＃13;

设置相对于打开它的元素的jQuery UI对话框位置

1 个答案: