繁体   English   中英

如何定位特定的jQuery对话框的“中间和中间” <DIV>

[英]How to position jQuery Dialog Box “Center and Middle” of a specific <DIV>

我想将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/ (出于某种原因,我的对话框在此小提琴中无法正常工作。不确定为什么)

让我知道您是否需要其他信息。

请提出建议。

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

单击按钮事件中,您将设置对话框。 如果将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以显示对话框)。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM