JQueryUI 对话框位置不起作用，

Question

我正在使用 JQueryUI Dialog 并在下面创建了这个函数：

<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 文件中将主体宽度和高度分别设置为 3000 像素。每当触发对话框的“打开”函数时，它不会从之前初始化时获得 X 位置，请记住：

position:[2250,50]

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

我想要的只是点击“点击！”段落，我希望对话框出现在初始化位置，水平滚动后我可能会看到它。 我该怎么办？

Answer 1

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

当定位元素在某个方向溢出窗口时， 将其移动到另一个位置。类似于 my 和 at，这接受 水平/垂直的单个值或一对，例如。 “翻转”，“适合”， “适合翻转”，“不适合”。

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

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

Answer 2

jQuery 1.8 以上应该这样做：

//Overriding collision detection default settings of the jQuery dialog.
$.extend($.ui.dialog.prototype.options.position, { collision: 'none' });

很遗憾，由于“_position”函数在源代码中的工作方式，无法在单独的对话框元素上更改此设置。这意味着以下内容将不起作用：

$('#elem').dialog({
position: {
    collision: 'none'
    }
});

不过，如果以后对代码的维护不成问题，你也可以弄乱 UI 对话框的源代码。