JQuery 模态框定位

JQuery Modal Box Positioning

提问by Mike

Alright. I am using a Modal box pop up window to display business details of a dynamic table. This table is very long. Everything works right with the modal box, but if they are say scrolled to the bottom of the page, it always opens the Modal box at the very top of the page. So they would have to do a lot of scrolling back down this way.

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

I am currently using this code to center my modal box.

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

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

}

I don't know if there is something in this code that is effecting it. A work around would be to have to scroll down to where they were previously but I couldn't find much documentation on .position.

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

回答by Mike

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

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

This guy built a plugin that centers any elements in the page by adding a .centerInClient. Very slick. Awesome time saver.

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

回答by redsquare

Why re-invent the wheel when there are a multitude of modal plugins where the authors have already done the hard work. Check out blockui, impromptu, jqmodalplugins. Even if you dont use them you can view the source script and see examples of how to achieve what you want.

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

回答by SolutionYogi

Here you go:

干得好：

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.

Though I agree with redsquare that there is no point in reinventing the wheel, use existing plugins.

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

EDIT:Your final code should look like this:

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

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

}

回答by Kevin Leary

A simple solution for me was to set the CSS for the containing element of the modal window to:

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

position:fixed;

This worked in IE7+, for IE6 you may need the advanced methods above.

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

回答by daniellmb

Here's nice way to extend the jQuery UI dialog plugin to have a new 'sticky' option...

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

回答by Vikash Singh

here is very good answer for setting position of ModelPopup. May this help you all.

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

1. Get the position you want the modal window to show. You can do it using ASP.NET Ajax library using Sys.UI.DomElement.getLocation method like this:

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

1. 获取您希望模态窗口显示的位置。您可以使用 ASP.NET Ajax 库使用 Sys.UI.DomElement.getLocation 方法来做到这一点，如下所示：

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

In this case I used some div control to set the modal windows next to it.

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

1. Get the Modal window reference by using it's panel or div element.

2. Set the location of the modal window:

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

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

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

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

回答by Wayne

I don't know why everyone says to use a plugin.. why reinvent the wheel. Why bother learning.. just get someone else to do it. I've been using jquery since 1.3.x and many of the plugins are bloated, not all, but many. I have written the same solution to many plugins I've studied in 1/4 the lines of code, plus they do what I want them to.

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

and before I forget... a simple solution the the problem of the scroll to top is to add... return false; once your modal or positioning code has run.

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