CODEWITHSUNDEEP
jqueryhtmlpopup
Bodine
Bodine

Reputation: 49

Popup window not centering using JQuery

I am new to this, and tried several thing posted. I can get a popup window with my html page on the same domain, but can not center it. Here is my code:

JS:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>

<script>
jQuery.fn.center = function(){
   this.css("position", "fixed");
   this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
   this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
   return this;
}
$(document).ready(function(){
   $('a#Popup').click(function(event){
      event.preventDefault();
      window.open(
         $(this).attr("href"),
         "popupWindow",
         "width=760,height=720,scrollbars=no"
      );
   });
});
</script>

HTML:

<td>
   <li>
      <a id="Popup" href="/images/Gallery/CustomBumperPlates/CustomBumperPlates.html" title="Gallery">
         Custom Bumper Plates
      </a>
   </li>
</td>

I have done it so many ways, not sure how to center it.

Upvotes: 0

Views: 2122

Answers (1)

Samsquanch
Samsquanch

Reputation: 9146

The problem you're having is that you're essentially trying to move around another window with jQuery after it loads, which you can't do the way you're trying. Do this instead:

$('a#Popup').click(function (event) {

    event.preventDefault();
    var width = 760;
    var height = 720;
    var toppx = ($(window).height() / 2) - (height / 2);
    var leftpx = ($(window).width() / 2) - (width / 2);
    window.open($(this).attr("href"), "popupWindow", "width=" + width + ",height=" + height + ",scrollbars=no,left=" + leftpx + "top="+toppx);
});

This sets the window left and right like you do in your center function, only it sets it on the window when it's opened.

Upvotes: 1

Related Questions