JQueryUI 对话框位置不起作用，

Question

我正在使用 JQueryUI 对话框并在下面创建了此函数:

<script>
    $(document).ready(function() {
        $('#dialog').dialog({
                autoOpen:false,
                width:100,
                height:200,
                position:[2250,50]
           });


        $('.class112').click(function() {
           var msg = $(this).attr('id');
           $('#dialog').load('classSource/' + msg + '.html', function() {
           $('#dialog').dialog('open');
           });
        });
    });
</script>

和 HTML 代码:

<p class="class112" id="class1">click!</p>

<div id="dialog" style="display: none;"></div>

它工作正常，但无论定位如何，它都会在调用“打开”函数后创建对话框。假设我的电脑屏幕有 x:1280 和 y:760 像素，并且 CSS 文件中的主体宽度和高度分别设置为 3000px。每当对话框的“打开”函数被触发时，它不会从之前初始化时获得 X 位置，请记住:

position:[2250,50]

因此，它在窗口的最右侧创建对话框，而不是在 X 声明的位置。但 Y 输出正确，因为 50px 在我的屏幕分辨率范围内。

我想要的只是当我点击“点击!”时段落，我希望对话框出现在初始化位置，并且在水平滚动后我也许能够看到它。我该怎么办？

Answer 1

我认为对话框小部件使用位置实用程序来定位自身。查看文档，您也许可以使用碰撞选项来控制此行为:

When the positioned element overflows the window in some direction, move it to an alternative position. Similar to my and at, this accepts a single value or a pair for horizontal/vertical, eg. "flip", "fit", "fit flip", "fit none".

http://jqueryui.com/demos/position/#option-collision

编辑:

是的，查看1.8.16的源码默认选项是“fit”:

    position: {
        my: 'center',
        at: 'center',
        collision: 'fit',
        // ensure that the titlebar is never outside the document
        using: function(pos) {
            var topOffset = $(this).css(pos).offset().top;
            if (topOffset < 0) {
                $(this).css('top', pos.top - topOffset);
            }
        }
    },

您可能希望将其覆盖为“none”。