JQuery Modal Box Positioning

Question

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.

Answer 1

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.

Answer 2

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, jqmodal plugins. Even if you dont use them you can view the source script and see examples of how to achieve what you want.

Answer 3

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.

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

}

Answer 4

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

position:fixed;

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

Answer 5

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

// 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

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

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

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

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

Answer 7

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.

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.