Question

我想将jQuery对话框中心对齐到DIV而不是整个窗口。

这是我的代码：

HTML

<div id="Box1"><input id="openDialogButton" type="button" value="Open Dialog"></div>
<div id="Box2"></div>
<div id="Box3"></div>
<div id="dialogbox" title="Dialog Heading">
    <p>Test Message</p>
</div>

CSS

div {
    display:inline-block;
    height:400px;
    padding:10px;
    border:1px solid #ff0000;
    width:50%;
    vertical-align:top;
}
#Box1 {
    width:90px;
}
#Box2 {
    width:150px;
}

的jQuery

$(document).ready(function () {
    $("#openDialogButton").click(function () {
        $("#dialogbox").dialog({
            width: 300,
            autoOpen: false,
            modal: false,
            position: {
                my: "center",
                at: "center",
                of: $('#Box3')
            },
            buttons: {
                "Submit": function () {
                    $(this).dialog("close");
                }
            }
        });
    });
});

这是小提琴：http://jsfiddle.net/Hftm3/ （出于某种原因，我的对话框不适合这个小提琴。不知道为什么）

如果您需要任何其他信息，请与我们联系。

请建议。

Answer 1

我认为问题是因为该元素在视口中不可见，在这种情况下，您可以scrollTo该元素然后触发对话框。

代码：

$(document).ready(function () {
    $("#openDialogButton").click(function () {
        $('html, body').animate({
            scrollTop: $("#Box3").offset().top
        }, 1000, function () {
            $("#dialogbox").dialog({
                width: 300,
                modal: false,
                position: {
                    my: "center",
                    at: "center",
                    of: $('#Box3')
                },
                buttons: {
                    "Submit": function () {
                        $(this).dialog("close");
                    }
                }
            });
        });
    });
});

演示：http://jsfiddle.net/8cjk6/

Answer 2

在中单击要设置对话框的按钮事件。如果将autoOpen设置为true，则会在您单击按钮后立即显示。我已经在你的jsfiddle中对它进行了测试。你只需要调整它的大小：

$(document).ready(function () {
    $("#openDialogButton").click(function () {
        $("#dialogbox").dialog({
            width: 300,
            height: 200, //try this
            autoOpen: true, //try this too
            modal: false,
            position: {
                my: "center",
                at: "center",
                of: $('#Box3')
            },
            buttons: {
                "Submit": function () {
                    $(this).dialog("close");
                }
            }
        });
    });
});

另外，将CSS更改为仅匹配您需要的内容：

#box1, #box2, #box3 {
    display:inline-block;
    height:400px;
    padding:10px;
    border:1px solid #ff0000;
    width:50%;
    vertical-align:top;
}

在您使用时仅使用div{会破坏所有div（包括由jquery生成的div以显示对话框）。

如何定位jQuery对话框＆＃34;中心和中间＆＃34;特定的<div> </div>

2 个答案: