3

我想使用 jQuery 创建一个小弹出窗口，当我单击图标时会出现该弹出窗口。我希望弹出窗口的顶角与图标重叠，以便在小窗口和按钮之间建立直观的连接（与当前出现在屏幕中间的行为相反）。这类似于 wunderlist.com，单击时钟并显示日历。我想创建一个具有日历、文本框和按钮的模式。

我可以让 jquery 模态出现，但我无法控制它的定位；它总是出现在屏幕中央。我在jQuery UI上使用代码

<script type="text/javascript">
    $.fx.speeds._default = 100;
    $(document).ready(function() {

        $( "#dialog" ).dialog({
            autoOpen: false,
            show: "blind",
        });

        $( ".hold_btn" ).click(function() {
            $( "#dialog" ).dialog( "open" );
            return false;
        });

    });
</script>

<button class="btn btn-primary hold_btn" type="button">Button</button>

<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
4

2 回答 2

5

您可以使用方法位置 选项位置

在您的情况下，您需要使用以下代码。

$.fx.speeds._default = 100;
    $(document).ready(function() {
     $( ".hold_btn" ).click(function() {
            $( "#dialog" ).dialog(
                { 
                    position: {
                        my: "left top", 
                        at: "right top",
                        of: window } }

            ).dialog("show");
            return false;
        });

    });
于 2012-10-31T13:33:32.023 回答
0

jQueryUI 有一个位置实用功能，可以非常精细地控制元素的放置位置和 . dialog()有一个选项来指定它的位置。

位置实用程序本身很强大，但可能会令人困惑。我建议阅读.position()不同的配置选项。

$('#dialog').dialog({
    autoOpen: false,
    show: 'blind',
    position: { my: 'left top', at: 'left bottom', of: button }
});
于 2012-10-31T13:33:57.770 回答