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，impromptu，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

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

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

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

var location = Sys.UI.DomElement.getLocation（$ get（“div1”））;

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

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

Sys.UI.DomElement.setLocation（$ get（'panel1'），location.x，location.y）;

Answer 6

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

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

JQuery模态框定位

7 个答案: