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

检查这个小提琴。

于 2013-08-22T06:45:33.180 回答
2

有一个最简单的覆盖弹出窗口的例子

关联

$(document).ready(function(){
  $(".container-popup, #close").click(function(){
   $('.popup').hide(); $('.container-popup').hide();
  });
});
于 2015-01-09T07:10:38.727 回答
0

将弹出窗口放置在overlay-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 回答