設置jQuery UI對話框相對於打開它的元素的位置

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的事件對象，不具有pageX和pageY特性，這是定位預計由jQuery UI position()方法。

相反，如果設置在打開之前的click事件處理程序對話框裏面的位置，你可以簡單地通過this，或點擊事件對象作爲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>