Question

我的网站上有一个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;
}

Answer 1

您应该将top和left值专门设置为50％，然后需要将margin-top和margin-left值设置为height和widths值除以-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中提供的modal popup plugin。这使得创建弹出窗口变得非常简单。您可以执行以下简单操作：

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

Answer 2

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

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);

jquery弹出窗口位置firefox问题

更新

2 个答案: