如何将弹出窗口居中显示并使其背景覆盖整个屏幕高度？

Question

如何将弹出窗口居中显示并使其背景覆盖整个屏幕高度？

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

当弹出窗口出现时，它是水平居中的，但垂直上方，因此它位于屏幕顶部中心位置。
覆盖层，浅灰色背景，意味着popupBackground仅占屏幕高度的10％，虽然宽度为100％。我该如何使其高度达到100％？

- DotnetSparrow

1

http://jqueryui.com/dialog/ --> 模态对话框 - Tushar Gupta - curioustushar

我无法使用jQuery UI对话框，因为我有自定义的弹出设计，尽管我正在使用jQuery通过.show方法显示我的自定义弹出窗口。 - DotnetSparrow

@DotnetSparrow - 请查看这个解决方案。 - Sunil Kumar

我该如何使覆盖层的高度为 100%？ - DotnetSparrow

抱歉之前的帖子有误，我已经修正了答案。希望能对你有所帮助！ - leoMestizo

3个回答

2

这是一个简单的覆盖弹出窗口示例

链接

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

- user3951808

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>

- Nikolaj Zander

将覆盖层放置在标签内部和外部！ - DotnetSparrow

我无法移动div到外面，因为它包含asp.net控件。 - DotnetSparrow

然后，您需要将表单标签的最小高度设置为100％，并将覆盖层保持在表单内。但是，请将弹出窗口放在覆盖层div内！如果您将弹出框设置为固定位置，则即使页面可滚动，它也会保持其位置。 - Nikolaj Zander

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- leoMestizo · Accepted Answer

这是一种只使用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;
}

Check this Fiddle.