如何使弹出窗口在屏幕中心和覆盖/背景到全屏高

how to make popup in center of screen and overlay/background to full screen high

本文关键字：背景覆盖何使弹窗口屏幕更新时间：2023-09-26

我正在开发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;
}

当弹出窗口出现时，它水平居中，但垂直位于顶部，因此它位于屏幕的中上角
覆盖，浅灰色背景，意味着弹出背景只有屏幕高度的10%，尽管宽度是100%。我怎样才能把它做到100%高

这是一个只使用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。

有一个最简单的叠加弹出的例子

链接

$(document).ready(function(){
  $(".container-popup, #close").click(function(){
   $('.popup').hide(); $('.container-popup').hide();
  });
});

将弹出窗口放置在覆盖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>