[英]Center Javascript pop up to the screen
嗨,我成功地在屏幕上弹出了一个窗口,唯一的问题是它位于页面的中心而不是屏幕的中心。
如何使其位于屏幕中央而不位于页面中央?
我在双屏幕上,但是以单视图查看页面。
CSS / CSS弹出样式 /
#blanket {
background-color: #111;
opacity: 0.60;
*background: none;
position: absolute;
z-index: 9001;
top: 0px;
left: 0px;
width: 100%;
}
#popUpDiv {
position: absolute;
background-color: #dddddd;
opacity: 0.90;
width: 400px;
height: 300px;
border: 5px solid #000;
z-index: 9002;
border: 2px solid #a1a1a1;
border-radius: 10px;
-webkit-box-shadow: 1px 2px 21px 6px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 2px 21px 6px rgba(0,0,0,0.75);
box-shadow: 1px 2px 21px 6px rgba(0,0,0,0.75);
}
</style>
使用Javascript
<script>
function toggle(div_id) {
var el = document.getElementById(div_id);
if (el.style.display == 'none') { el.style.display = 'block'; }
else { el.style.display = 'none'; }
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height = blanket_height / 2 - 200;//200 is half popup's height
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width = window_width / 2 - 200;//200 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
</script>
HTML的一部分
<div id="popUpDiv" style="display: none;">
<div style="float: right; text-align: right;">
<div id="Close" style="margin: 5px 5px 0 auto; z-index: 9003!important;">
<asp:ImageButton ID="ImageButton1" ImageUrl="~/EmailClient/Trash.png" Width="20px" Height="20px" runat="server" />
</div>
<center><p style="color:black;z-index: 9003!important; font-size: x-large;"> <b>Price Change</b> </center>
<table class="auto-style1000 table_1" style="z-index: 9003!important;">
<tr>
<td class="auto-style4000">Item:</td>
<td style="text-align: left !important;">
<asp:TextBox ID="TextBox6" runat="server" Width="150px"></asp:TextBox>
</td>
<td> </td>
</tr>
<tr>
<td class="auto-style4000">Unit Price:</td>
<td style="text-align: left !important;">
<asp:TextBox ID="TextBox7" runat="server" Width="150px"></asp:TextBox>
</td>
<td> </td>
</tr>
<tr>
<td class="auto-style4000">List Price:</td>
<td style="text-align: left !important;">
<asp:TextBox ID="TextBox8" runat="server" Width="150px"></asp:TextBox>
</td>
<td> </td>
</tr>
<tr>
<td class="auto-style4000">Markup:</td>
<td style="text-align: left !important;">
<asp:TextBox ID="TextBox9" runat="server" Width="150px"></asp:TextBox>
</td>
<td> </td>
</tr>
<tr>
<td class="auto-style4000">Margin:</td>
<td style="text-align: left !important;">
<asp:TextBox ID="TextBox10" runat="server" Width="150px"></asp:TextBox>
</td>
<td> </td>
</tr>
<tr>
<td class="auto-style3000"> </td>
<td style="text-align: left !important;">
<asp:Button ID="Button3" CssClass="button_1 green" runat="server" Text="Save" Width="104px" />
</td>
<td> </td>
</tr>
</table>
</div>
</div>
<a href="#" onclick="popup('popUpDiv')">Click to Open CSS Pop Up</a>
<!-- / POPUP-->
<!-- end #mainContent -->
</div>
谢谢
#popUpDiv {
position: fixed;
width: 400px;
height: 300px;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -200px;
}
如果其宽度/高度固定,则应将其居中。
用伪代码:div.style.top =(window.height-div.height)/ 2 + window.scrollTop
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.