首页 / JAVASCRIPT / js弹出的对话窗口永远保持居中显示

js弹出的对话窗口永远保持居中显示

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js弹出的对话窗口永远保持居中显示，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1339字，纯文字阅读大概需要2分钟。

内容图文

代码如下:

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
<style type="text/css"> 
.Div_Scroll { 
position:fixed; 
margin:-10px; 
visibility:hidden; 
background-color:#808080; 
opacity:0.6; 
z-index:99; 
} 
.Div_Scroll_Content { 
position:relative; 
margin-top:20%; 
width:inherit; 
height:inherit; 
} 
.Div_AlertWindow { 
margin:auto; 
width:200px; 
height:100px; 
background-color:lightblue; 
border:5px solid #f00; 
} 
</style> 
<script type="text/javascript"> 
window.onload = function () { 
var alertWindow = $("alertParent"); 
alertWindow.style.width = window.screen.availWidth + "px"; 
alertWindow.style.height = window.screen.height + "px"; 
$("Sure").onclick = function () { 
alertWindow.style.visibility = "hidden"; 
} 
} 
function ShowAlert() { 
var alertWindow = $("alertParent"); 
alertWindow.style.visibility = "visible"; 
} 
$ = function (id) { 
return document.getElementById(id); 
} 
</script> 
</head> 
<body> 
<div id="alertParent" class="Div_Scroll"> 
<div class="Div_Scroll_Content"> 
<div id="AlertWindow" class="Div_AlertWindow"> 
<input type="button" id="Sure" value="close alert Dialog..." /> 
</div> 
</div> 
</div> 
<div style="height:1300px; padding-top:200px;" > 
<input id="alertButton" type="button" onclick="ShowAlert();" value="Show alert Dialog..."/> 
</div> 
</body> 
</html> 
 
添加遮罩层

内容总结

以上是互联网集市为您收集整理的js弹出的对话窗口永远保持居中显示全部内容，希望文章能够帮你解决js弹出的对话窗口永远保持居中显示所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/367647.html

来源：【匿名】