3

私はasp.netページに取り組んでいます。マスターページには、次のような div があります。

<body id="page1" >
    <form id="form2" runat="server">
        <div id="content">
            <!-- this is popup light grey show -->
            <div class="darkenBg" id="popupBackground" style="display:none;"></div>

            <!-- content -->

            <div class="greenBox2 popUpWin" id="companySigninPopup" style="display:none;">
                <div class="topWrap">
                    <!-- popup window -->
                </div>
                <div class="botWrap">
                    <div class="corner-bottom-left">&nbsp;</div>
                    <div class="border-bottom">&nbsp;</div>
                    <div class="corner-bottom-right">&nbsp;</div>
                </div>
            </div>
        </div>
    </div>
</div>

私はそれを次のように示しています。

function ShowHomePagePopup(popupId) {
    $("#" + popupId).show();
    $("#popupBackground").show();
    $('#popupBackground').height(800);
    $("#page1").addClass('hideScrollbars');
}

css は次のようになります。

html, body {
    height:100%;
    margin:0px;
}
.darkenBg { /*added this div after body*/
    background: url(/images/blackBg.png);
    position:absolute;
    z-index:30;
    width:100%;
    height:100%;
    bottom:0px;
}
.popUpWin {
    position:absolute;
    z-index:31;
    width:500px;
    left:50%;
    margin:200px 0 0 -250px
}
.hideScrollbars {
    overflow: hidden;
}
#content {
    background:url(/images/bg.gif) top left repeat-x #fff;
    overflow:hidden;
    padding-bottom:20px;
}
  1. ポップアップが表示されると、水平方向には中央に配置されますが、垂直方向には上部に配置されるため、画面の上部中央になります。
  2. オーバーレイ、明るい灰色の背景は、popupBackground が画面の高さの 10% にすぎないことを意味しますが、幅は 100% です。どうすれば100%ハイにできますか?
4

3 に答える 3

7

これは、CSS だけでポップアップを作成する良い方法です。

HTML コード:

<div class="container-popup">
    <div class="popup"></div>
</div>

CSS コード:

.container-popup {
    position: relative;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.8);
}

.popup {
    width: 50%;
    height: 50%;
    background: #1abcb9;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

このFiddleを確認してください。

于 2013-08-22T06:45:33.180 に答える
0

オーバーレイ div 内にポップアップ ウィンドウを配置します。

 <body id="page1" style="height: 100%;">

<form id="form2" runat="server" style="min-height: 100%;">
 <div id="content">
..

content

...


</div>
</div>

<div class="darkenBg" id="popupBackground" style="display:none;">
        <div class="greenBox2 popUpWin" id="companySigninPopup" style="display:none;">
           <div class="topWrap">
          popup window
           </div>
           <div class="botWrap">
           <div class="corner-bottom-left">&nbsp;</div>
           <div class="border-bottom">&nbsp;</div>
           <div class="corner-bottom-right">&nbsp;</div>
        </div>
      </div>
    </div>
 </form>
</div>
于 2013-08-22T06:25:04.287 に答える