0

サイトに jquery ポップアップ ウィンドウ スクリプトがあります。クロムでは問題なく動作しますが、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

特に上と左の値を50％に設定する必要があります。次に、margin-topとmargin-leftの値をheightとwidthの値を-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 });
}

それ以外の場合、プラグインを使用してポップアップを処理してもかまわない場合は、jqueryUIで提供されるモーダルポップアッププラグインをお勧めします。ポップアップの作成が非常に簡単になります。次のような簡単なことを行うことができます。

$(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 に答える