jQuery UI只在div上显示模式对话框？

Question

我想在整个页面上显示一个模态对话框，但是在DOM中的某个div上。这可能吗？ docs中的示例仅显示如何在整个页面上显示对话框。

Answer 1

查看“位置”选项。像这样使用它：

$(".selector").dialog({ position: [350,100] }); // places dialog at x:350, y:100

然后你可以将x，y排成一行，使其位于目标div之上。

Answer 2

您可以使用jQuery的.offset（）来查找div的位置，然后执行John所说的

适合Div：

var bg_div = $("#background_div");
var pos = bg_div.offset();
var margin = 10;

$(".selector").dialog({ 
    position: [pos.left+margin,pos.top+margin],
    width: bg_div.outerWidth() - margin*2,
    height: bg_div.outerHeight() - margin*2
});

Div中心：

var bg_div = $("#background_div");
var pos = bg_div.offset();
var x = pos.left + (bg_div.outerWidth()/2);
var y = pos.top + (bg_div.outerHeight()/2);

$(".selector").dialog({position: [x,y]});