javascript - 如何定位特定 <DIV> 的 jQuery 对话框 "Center and Middle"

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

这是 fiddle :http://jsfiddle.net/Hftm3/ (出于某种原因，我的对话框在这个 fiddle 中不起作用。不知道为什么)

如果您需要任何其他信息，请告诉我。

请提出建议。

Answer 1

我认为问题是因为该元素在视口(viewport)中不可见，在这种情况下，您可以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/