弹出窗口不使用JQuery居中

时间:2014-01-27 22:42:57

标签: jquery html popup

我是新手,并尝试了几件事。我可以在同一个域中使用我的html页面获得一个弹出窗口,但不能将其居中。这是我的代码:

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> 

我已经做了很多方法,不知道如何集中它。

1 个答案:

答案 0 :(得分:1)

你遇到的问题是你在加载后基本上试图用jQuery移动另一个窗口,这是你不能按照你尝试的方式进行的。这样做:

$('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);
});

这样可以像在中心功能中一样左右设置窗口,只有在窗口打开时才将其设置在窗口上。