0

我的网站上有一个 jquery 弹出窗口脚本。它在 chrome 中运行良好,但在 Firefox 中,当窗口打开时,它出现在顶部,我希望它在垂直方向上更居中显示。例如。

 ________________________
|     |           |     |
|     |   popup   |     |
|     |           |     |
|     |___________|     |
|                       |
|_______________________|

popup.js 中的脚本:

function centerPopup(){
  var windowWidth = document.documentElement.clientWidth;
  var windowHeight = document.documentElement.clientHeight;
  var windowTop =window.screenTop;
  var popupHeight = $(".popupContent").height();
  var popupWidth = $(".popupContent").width();

  $(".popupContent").css({
    "position": "fixed",
    "top": (windowTop+250)-popupHeight/2,
    "left": windowWidth/2-popupWidth/2
    });

  //this is needed for ie6
  $(".backgroundPopup").css({ "position": "fixed", "height": windowHeight, "top": windowTop });
  }

任何人都可以提供任何建议我需要更改以使其正常工作吗?

更新

上面的代码来自 popup.js 脚本,还有一个 popup.css,我不确定这部分是否有任何冲突或导致问题

   .popupContent{
display:none;
align: center;
position: fixed;
_position: fixed; 
height:auto;
width:500px;
background:#fff;
z-index:9999;
padding:8px;
-moz-border-radius: 10px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
background-color: #15150B;
border:2px solid #C9C58F;
}
4

2 回答 2

0

您应该专门将 top 和 left 值设置为 50%,然后您需要将 margin-top 和 margin-left 值设置为高度和宽度值除以 -2。请注意,您还应该重复使用您的$(".popupContent"),因为您不止一次使用它。

function centerPopup(){
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var windowTop =window.screenTop;
    var $popup = $(".popupContent");
    var popupHeight = $popup.height();
    var popupWidth = $popup.width();

    $popup.css({
        "position": "fixed",
        "top": "50%",
        "left": "50%",
        "z-index": "100",
        "width": popupWidth,              // Set the width of the popup
        "height": popupHeight,            // Set the height of the popup
        "margin-top": (popupHeight / -2), // Note this value is half the height
        "margin-left": (popupWidth / -2)  // Note this value is half the width
    });

    // IE6 hack :P
    $(".backgroundPopup").css({ "position": "fixed", "height": windowHeight, "top": windowTop });
}

否则,如果您不介意使用插件来处理弹出窗口,我会推荐jquery UI 中提供的模态弹出插件。它使创建弹出窗口变得非常简单。您可以执行以下简单的操作:

$(function() {
    // Create a modal from an existing div
    $("#div_MyDialog").dialog();

    // OR Create a modal from input html
    $('<div id="div_MyDialog">My new dialog</div>').dialog();  
});
于 2012-07-09T16:06:55.310 回答
0

我使用此代码在窗口中心打开一个基本弹出窗口:

http://jsfiddle.net/hsgtA/

var w = 800;
var h = 500;
var left = (screen.width / 2) - (w / 2);
var top = (screen.height / 2) - (h / 2);
var target_win = window.open ('http://google.com', false, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+ w +', height='+ h +', top='+ top +', left='+ left);
于 2012-07-09T16:50:39.253 回答