jquery-ui – 在div中保留一个jQuery对话框

我正在尝试创建一些jQuery对话框,但我想将它们的位置限制在父div中.我正在使用以下代码创建它们(在旁注上,oppacity选项不起作用……)：

var d= $('<div title="Title goes here"></div>').dialog({
            autoOpen: true,cloSEOnescape: false,draggable: true,resizable: false,width: dx,height: dy
        });

        d.draggable('option','containment','parent');
        d.draggable('option','opacity',0.45);

        $('#controlContent').append(d.parent());

解决方法

以上解决方案的一些更有用和完整的版本.

它甚至限制了div之外的大小调整！

JavaScript已完全注释掉了.

// Public Domain
// Feel free to use any of the JavaScript,HTML,and CSS for any commercial or private projects. No attribution required.
// I'm not responsible if you blow anything up with this code (or anything else you Could possibly do with this code).

jQuery(function($) 
{ 
    // When the document is ready run the code inside the brackets.
    $("button").button(); // Makes the button fancy (ie. jquery-ui styled)
    $("#dialog").dialog(
    { 
        // Set the settings for the jquery-ui dialog here.
        autoOpen: false,// Don't open the dialog instantly. Let an event such as a button press open it. Optional.
        position: { my: "center",at: "center",of: "#constrained_div" } // Set the position to center of the div.
    }).parent().resizable(
    { 
        // Settings that will execute when resized.
        containment: "#constrained_div" // Constrains the resizing to the div.
    }).draggable(
    { 
        // Settings that execute when the dialog is dragged. If parent isn't used the text content will have dragging enabled.
        containment: "#constrained_div",// The element the dialog is constrained to.
        opacity: 0.70 // Fancy opacity. Optional.
    });

    $("#button").click(function() 
    { 
        // When our fancy button is pressed the stuff inside the brackets will be executed.
        $("#dialog").dialog("open"); // Opens the dialog.
    });
});

http://jsfiddle.net/emilhem/rymEh/33/