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