Question

我想使用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>

Answer 1

您可以使用方法位置 option-position

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

$.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;
        });

    });

Answer 2

jQueryUI有一个位置实用程序函数，可以非常精确地控制放置元素的位置，而{。{1}}可以选择specify a position。

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

dialog()

控制jQuery模态的定位

2 个答案: