JQuery 模态框定位

Question

好吧。 我正在使用模态框弹出窗口来显示动态表的业务详细信息。 这张桌子很长。 模态框的一切正常，但如果它们滚动到页面底部，它总是会打开页面最顶部的模态框。 因此他们必须以这种方式向下滚动很多次。

我目前正在使用此代码将我的模式框居中。

function centerPopup(x){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#popup" + x).height();
    var popupWidth = $("#popup" + x).width();
    //centering
    $("#popup" + x).css({
        "position": "absolute",
        "top": windowHeight/2-popupHeight/2,
        "left": windowWidth/2-popupWidth/4
    });
    //only need force for IE6

    $('#backgroundPopup').css({
        "height": windowHeight
    });

}

我不知道这段代码中是否有什么东西会影响它。 解决方法是必须向下滚动到它们之前所在的位置，但我找不到太多关于 .position 的文档。

Answer 1

http://www.west-wind.com/weblog/posts/459873.aspx

这家伙构建了一个插件，通过添加 .centerInClient 将页面中的任何元素居中。 非常光滑。 非常节省时间。

Answer 2

既然有大量的模态插件，而且作者已经完成了艰苦的工作，为什么还要重新发明轮子呢？ 查看 blockui、即兴，jqmodal 插件。 即使您不使用它们，您也可以查看源脚本并查看如何实现您想要的目标的示例。

Answer 3

给你：

var scrolledX = document.body.scrollLeft || document.documentElement.scrollLeft || self.pageXOffset;
var scrolledY = document.body.scrollTop || document.documentElement.scrollTop || self.pageYOffset;

var screenWidth = document.body.clientWidth || document.documentElement.clientWidth || self.innerWidth;
var screenHeight = document.body.clientHeight || document.documentElement.clientHeight || self.innerHeight;

var left = scrolledX + (screenWidth - $("#popup" + x).width())/2;
var top = scrolledY + (screenHeight - $("#popup" + x).height())/2;

//Use the top and left variables to set position of the DIV.

尽管我同意 redsquare 的观点，即没有必要重新发明轮子，但请使用现有的插件。

编辑：您的最终代码应如下所示：

function centerPopup(x)
{

    var scrolledX = document.body.scrollLeft || document.documentElement.scrollLeft || self.pageXOffset;
    var scrolledY = document.body.scrollTop || document.documentElement.scrollTop || self.pageYOffset;

    var screenWidth = document.body.clientWidth || document.documentElement.clientWidth || self.innerWidth;
    var screenHeight = document.body.clientHeight || document.documentElement.clientHeight || self.innerHeight;

    var left = scrolledX + (screenWidth - $("#popup" + x).width())/2;
    var top = scrolledY + (screenHeight - $("#popup" + x).height())/2;

    //centering
    $("#popup" + x).css({
        "position": "absolute",
        "top": top,
        "left": left
    });
    //only need force for IE6

    $('#backgroundPopup').css({
        "height": screenHeight
    });

}

Answer 4

对我来说，一个简单的解决方案是将模态窗口包含元素的 CSS 设置为：

position:fixed;

这在 IE7+ 中有效，对于 IE6，您可能需要上面的高级方法。

Answer 5

这是扩展 jQuery UI 对话框插件以获得新的“粘性”选项的好方法......

// This code block extends the ui dialog widget by adding a new boolean option 'sticky' which,
// by default, is set to false. When set to true on a dialog instance, it will keep the dialog's
// position 'anchored' regardless of window scrolling - neato.

// Start of ui dialog widget extension...
(function(){
    if($.ui !== undefined && $.ui.dialog !== undefined)
    {
        var UIDialogInit = $.ui.dialog.prototype._init;
        $.ui.dialog.prototype._init = function()
        {
            var self = this;
            UIDialogInit.apply(this, arguments);

            //save position on drag stop for sticky scrolling
            this.uiDialog.bind('dragstop', function(event, ui)
            {
                if (self.options.sticky === true)
                {
                    self.options.position = [(Math.floor(ui.position.left) - $(window).scrollLeft()),
                                             (Math.floor(ui.position.top) - $(window).scrollTop())];
                }
            });

            //we only want to do this once
            if ($.ui.dialog.dialogWindowScrollHandled === undefined)
            {
                $.ui.dialog.dialogWindowScrollHandled = true;
                $(window).scroll(function(e)
                {
                    $('.ui-dialog-content').each(function()
                    {   //check if it's in use and that it is sticky
                        if ($(this).dialog('isOpen') && $(this).dialog('option', 'sticky'))
                        {
                            $(this).dialog('option', 'position', $(this).dialog('option','position'));
                        }
                    });
                });
            }
        };

        $.ui.dialog.defaults.sticky = false;
    }
})();
// End of ui dialog widget extension... 

Answer 6

这是设置 ModelPopup 位置的非常好的答案。 希望这对大家有所帮助。

1. 获取您希望模态窗口显示的位置。 您可以使用 ASP.NET Ajax 库使用 Sys.UI.DomElement.getLocation 方法来完成此操作，如下所示：

   var location = Sys.UI.DomElement.getLocation($get("div1"));

在本例中，我使用了一些 div 控件来设置它旁边的模式窗口。

1. 使用其面板或 div 元素获取模态窗口引用。

2. 设置模态窗口的位置：

   Sys.UI.DomElement.setLocation($get('panel1'), location.x,location.y);

Answer 7

我不知道为什么每个人都说使用插件..为什么要重新发明轮子。 为什么要费心去学习……只是让别人来做。 我从 1.3.x 就开始使用 jquery，很多插件都很臃肿，不是全部，而是很多。 我已经用 1/4 代码行为我研究过的许多插件编写了相同的解决方案，而且它们做了我想要的事情。

在我忘记之前...滚动到顶部问题的一个简单解决方案是添加...
返回假；
一旦模态或定位代码运行。