jquery - 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 上找不到太多文档。

score 12 · Accepted Answer

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

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

score 7 · Accepted Answer

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

score 3 · Accepted Answer

干得好：

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

}

score 2 · Accepted Answer

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

position:fixed;

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

score 1 · Accepted Answer

这是扩展 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...

score 0 · Accepted Answer

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

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

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

在这种情况下，我使用了一些 div 控件来设置它旁边的模态窗口。

使用其面板或 div 元素获取模态窗口引用。
设置模态窗口的位置：

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

score -2 · Accepted Answer

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

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

jquery - jQuery 模态框定位

7 回答 7

Related

Reference