jQuery 如何使屏幕中央的弹出窗口和覆盖/背景全屏高
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18372928/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to make popup in center of screen and overlay/background to full screen high
提问by DotnetSparrow
I am working on asp.net page. In master page I have a div like this:
我在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"> </div>
<div class="border-bottom"> </div>
<div class="corner-bottom-right"> </div>
</div>
</div>
</div>
</div>
</div>
I am showing it like this:
我是这样展示的：
function ShowHomePagePopup(popupId) {
$("#" + popupId).show();
$("#popupBackground").show();
$('#popupBackground').height(800);
$("#page1").addClass('hideScrollbars');
}
css is like this:
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;
}
- When the popup appears, it is centered horizontally, but vertically at the top, so it is at top mid of the screen.
- The overlay, light grey background, means popupBackground is only 10% of the height of screen although width is 100%. How can I make it 100% high ?
- 当弹出窗口出现时，它水平居中，但垂直在顶部，所以它位于屏幕的顶部中间。
- 覆盖层，浅灰色背景，表示 popupBackground 虽然宽度为 100%，但仅为屏幕高度的 10%。我怎样才能使它 100% 高？
采纳答案by Nikolaj Zander
Place the Popup Window inside the overlay-div!
将弹出窗口放在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"> </div>
<div class="border-bottom"> </div>
<div class="corner-bottom-right"> </div>
</div>
</div>
</div>
</form>
</div>
回答by leoMestizo
This is a good way to make a popup only with CSS:
这是仅使用 CSS 制作弹出窗口的好方法：
The HTML code:
HTML代码：
<div class="container-popup">
<div class="popup"></div>
</div>
The CSS code:
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.
检查这个Fiddle。
