Set the popup window to center jquery

Question

Right now I'm setting the position of the modal jQuery window in this way:

   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 do I center the popUp when I scroll down?

Answer 1

You could just use another CSS style, try position: fixed

Answer 2

you can use this in this way

// Position modal box 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 center the modal. you can view this kind of work in another question

modal appears on page load