1

モニターの中央にポップアップ ウィンドウを開こうとしています。私が知っているように、各デスクトップまたはラップトップの画面サイズは異なります。そのため、コードがポップアップ ウィンドウを開こうとするたびにブラウザの中央で開かれるようにする方法を探しています。

以下は私のコードです-

<html>

<head>
<style>

* { font-family: Trebuchet MS; }
#containerdiv {width:90%; height: 90%; display: none; position: fixed;margin-top: 5%; margin-left: 5%; background:#FFF; border: 1px solid #666;border: 1px solid #555;box-shadow: 2px 2px 40px #222; z-index: 999999;}
/*#containerdiv iframe {display:none; width: 100%; height: 100%; position: absolute; border: none; }*/
#blockdiv {background: #000; opacity:0.6;  position: fixed; width: 100%; height: 100%; top:0; left:0; display:none;}
ul { padding:10px; background: #EEE; position: absolute; height: 200px; overflow: scroll;}
ul li {color: #222; padding: 10px; font-size: 22px; border-bottom: 1px solid #CCC;  }
h3 { font-size: 26px; padding:18px; border-bottom: 1px solid #CCC; }
#close { top: 13px;position: absolute;right: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#close:hover {  cursor: pointer; background: #E5E5E5 }

#apply { top: 13px;position: absolute;left: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#apply:hover {  cursor: pointer; background: #E5E5E5 }

</style>

<script type="text/javascript"  src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<script>

function open(url) {
    $('#blockdiv').fadeIn();
    $('#iframe').attr('src', url);
    $('#containerdiv').fadeIn();   
}

function close() {  
    $('#blockdiv').fadeOut();
    $('#containerdiv').fadeOut();  
}

$(document).ready(function() {
  $('ul').css({width: $('#containerdiv').width()-20,height:    $('#containerdiv').height()-90})

     $('#close').click( function() { close() })
     $('#apply').click( function() { open('http://www.google.com/') })

});

</script>
</head>
<body>
<span id="apply">ApplyOnline</span>
<div id="blockdiv"></div>
<div id="containerdiv">
    <iframe id="iframe" style="width:100%; height: 100%; outline: 1px solid red;"></iframe>
    <span id="close">Close</span>
</div>
</body>
</html>

しかし、どういうわけか、上記のコードはモニターの中央で開かれません。誰でもこれについて私を助けることができますか? 円の中心にあるポップアップ ウィンドウが常に開くようにするには、上記のコードにどのような変更を加える必要がありますか。

4

2 に答える 2

1

cssのようにポップアップを中央に配置できます

これは中央に配置するための CSS メソッドにすぎないため、中央に配置するための js は必要ありません。

#containerdiv {
    width:90%;
    height: 90%;
    display: none;
    position: fixed;
    left:50%;
    top:50%;
    margin:-45% 0 0 -45%;
    background:#FFF;
    border: 1px solid #666;
    border: 1px solid #555;
    box-shadow: 2px 2px 40px #222;
    z-index: 999999;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}
于 2013-07-27T23:24:26.467 に答える