在 div 中保留一个 jQuery 对话框答案

【问题标题】：Keep a jQuery dialog in a div在 div 中保留一个 jQuery 对话框
【发布时间】：2011-06-11 10:00:12
【问题描述】：

我正在尝试创建一些 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());

【问题讨论】：

#controlContent 的位置是否为：相对/绝对？
我也没有指定，我只是尝试将其设置为相对并且没有任何更改并将其设置为绝对会使对话框的内容窗格消失并仅保留 jDialog 的标题栏。 .
原因将父级设置为位置：relative 使子级相对于其父级而不是文档的顶部/左侧。

标签： jquery-ui jdialog jquery-ui-draggable

【解决方案1】：

上述解决方案的更有用和更完整的版本。

它甚至还限制了 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/

【讨论】：

这几天一直在寻找这样的东西！谢谢！

【解决方案2】：

我找到了一种方法。这是我现在创建对话框的方法：

    var d = $('<div title="Title"></div>').dialog({
        autoOpen: true,
        closeOnEscape: false,
        resizable: false,
        width: 100,
        height: 100
    });

    d.parent().find('a').find('span').attr('class', 'ui-icon ui-icon-minus');
    d.parent().draggable({
        containment: '#controlContent',
        opacity: 0.70
    });

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

【讨论】：