Question

我遇到了问题，因为jQuery对话框自动将其自身定位到窗口大小。

例如：

#dialog2

$( "#dialog2" ).dialog({
  position: [0,1000],
  autoOpen: false
});

未正确定位到x = 0和top = 1000并在浏览器中显示滚动条。而不是它根据窗口大小定位自己。

有什么建议吗？

我想将对话框放在指定的位置，并在浏览器中显示滚动条。

Answer 1

~~以下几乎对我有用，因为垂直位置是正确的但水平位置是坏的。~~

修改：根据需要，在窗口左侧正确定位了一个更好的解决方案（和demo）。

HTML

<div id="dialog">Hello World</div>

的JavaScript

$('#dialog').dialog({
  position:{
    my:'left',
    at:'left',
    offset:'0 1000',
    collision:'none'
  }
});

注意：需要jQuery，jQueryUI和其中一个jQueryUI主题。基本上，位置选项是在容器左侧的我的左侧位置，其水平偏移为0px，垂直偏移为1000像素”。 collision 参数指示jQueryUI在窗口溢出时不重新定位元素（参见jQueryUI position collision文档）

最后，http://css-tricks.com/jquery-ui-position-function/还解释了图片的内容： - ）

Answer 2

我认为JqueryUI对话框根本不允许溢出页面，所以除非你覆盖Widget以允许这样做，否则就不可能。

它应该在$ .widget（'ui.dialog'{}）对象下的jquery-ui-VER.js中的这个函数内

_position : function (a) {
        var b = [],
        d = [0, 0],
        e;
        if (a) {
            if (typeof a === "string" || typeof a === "object" && "0" in a) {
                b = a.split ? a.split(" ") :
                    [a[0], a[1]];
                if (b.length === 1)
                    b[1] = b[0];
                c.each(["left", "top"], function (g, f) {
                    if (+b[g] === b[g]) {
                        d[g] = b[g];
                        b[g] = f
                    }
                });
                a = {
                    my : b.join(" "),
                    at : b.join(" "),
                    offset : d.join(" ")
                }
            }
            a = c.extend({}, c.ui.dialog.prototype.options.position, a)
        } else
            a = c.ui.dialog.prototype.options.position;
        (e = this.uiDialog.is(":visible")) || this.uiDialog.show();
        this.uiDialog.css({
            top : 0,
            left : 0
        }).position(c.extend({
                of : window
            }, a));
        e || this.uiDialog.hide()
    },

jQuery对话框根据窗口大小定位自动定位

2 个答案:

HTML

的JavaScript