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>

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

position:[2250,50]

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

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

Answer 1

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

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

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

编辑：

是的，查看1.8.16的来源，默认选项是“适合”：

    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对话框的源代码。

JQueryUI Dialog位置不起作用，

2 个答案: