JQueryUI Dialog位置不起作用,

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

您可能希望将其覆盖为"无".