Set popup to jquery center

Question

Now I set the position of the jQuery modal window as follows:

var winH = $(window).height(); var winW = $(window).width(); //Set the popup window to center $(id).css('top', winH/2-$(id).height()/2); $(id).css('left', winW/2-$(id).width()/2); 

How to center popUp when scrolling down?

Answer 1

You can just use a different CSS style, try position: fixed

Answer 2

you can use it this way

// Set the modal block in the center of the page

  jQuery.fn.center = function () { this.css("position","absolute"); this.css("top", ( jQuery(window).height() - this.height() ) / 2+jQuery(window).scrollTop() + "px"); this.css("left", ( jQuery(window).width() - this.width() ) / 2+jQuery(window).scrollLeft() + "px"); return this; } 

// then call the function

  jQuery(".modal-profile").center(); 

and this will make your code organized and easy to use in any project for a modal center. you can view this work in another question

modal appears on page load

Answer 3

It helps me!

 $.fn.center = function() { this.css("position", "fixed"); this.css("top", ($(window).height()/2 - this.height()/2) + "px"); this.css("left", ($(window).width()/2 - this.width()/2) + "px"); return this; } 

And use as described.

$ ("modal window.") Center () ;.

Answer 4

Assuming you are using the jQuery UI dialog, the default position is the "center" , which by default centers it in the viewport. If you are using another jQuery modal window, then:

 $(id).css({ 'position': 'fixed', 'top': parseInt((winH / 2) - ($(id).height() / 2), 10) 'left': parseInt((winW / 2) - ($(id).width() / 2), 10) }); 

can do the trick. I'm not sure what you mean by “scroll down,” as the modal dialog box and scrolling (outside the dialog) are mutually exclusive.