0

次の Javascript と CSS を使用してポップアップを作成しています。

<script type="text/javascript">
    Sys.debug = true;
    var popup;
    Sys.require(Sys.components.popup, function () {
        popup = Sys.create.popup("#popup", {
            parentElementID: "target",
        });
    });
    var popup2;
    Sys.require(Sys.components.popup, function () {
        popup2 = Sys.create.popup("#popup2", {
            parentElementID: "target",
        });
    });
</script>

#popup
{
    width: 400px;
    height: 250px;
    overflow: scroll;
    background-color: #EAFDB3;
    border: solid 2px black;
}
#popup2
{
    width: 400px;
    height: 250px;
    background-color: #EAFDB3;
    border: solid 2px black;
}

これらのポップアップが表示される場所は次のとおりです。

 <span id="target" style="position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px;"></span>

ポップアップの内容は次のとおりです。

<div id="popup" style="background: #EAFDB3; color: #000; padding: 15px; margin: 0px">CONTENT </div>

解像度に関係なく、このポップアップを画面の中央にポップアップさせるにはどうすればよいですか?

4

3 に答える 3

2

動的にサイズ変更されるポップアップの場合は、コンテンツを div.vc-outer と div.vc-inner でラップすることを検討してください。

CSS

.vc-outer {
  display: table;
  position: fixed;
  width: 100%;
  height: 100%; }

.vc-inner {
  display: table-cell;
  text-align: center;
  vertical-align: middle; }

.popup {
  display: inline-block; }

HTML

<div class="vc-outer"><div class="vc-inner">
  <div class="popup">Hey!</div>
</div></div>
于 2013-08-02T16:34:25.053 に答える
2

上を 50%、左を 50% に設定します。次に、ポップアップの幅の半分である負の左マージンと、ポップアップの高さの半分である負の上マージンを設定します。あなたが持っているものは近いようです...

ただし、ポップアップのサイズが 400x250 の場合、margin-top は -125px、margin-left は -200px にする必要があります。

于 2013-08-02T16:10:35.907 に答える
0

IDを使用するだけでなく、インラインスタイル（同じプロパティでも）を指定しています。これは一度だけ行い、ID を使用することをお勧めします。

于 2013-08-02T16:25:31.397 に答える