jQuery UI display modal dialog only over a div?

I would like to display a modal dialog over 开发者_C百科the entire page, but over a certain div in the DOM. Is this possible? Examples in the docs only show how to display a dialog over the entire page.

---

Check out the "position" option. Use it like this:

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

Then you can line up the x,y to sit above your target div.

---

You can use jQuery's .offset() to find the div's position and then do what John said

Fit inside 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
});

Center over 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]});