您的位置：首页 > Web前端 > JavaScript

js实现全屏弹框

2017-06-22 18:37 176 查看

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>全屏弹框</title>
<style type="text/css">
#DialogsAlert{
width:505px;
background-color:#fff;
text-align:center;
font-size:14px;
color:#767676;
font-family:"microsoft yahei",simsun,Tahoma,sans-serif;
display: none;
z-index: 9999;
position:fixed;
top:28%;
left:36%;
}
#DialogsAlert h2{
height:40px;
}
.act_pop_title{
background: #005C91;
color:#ffffff;
text-align: left;
text-indent: 30px;
line-height: 40px;
height:40px;
}
.Dialogs-Close{
width:40px;
height:40px;
right:-45px;
top:0;
position:absolute;
background-position: -419px 3px;
z-index: 5;
background-color: #005c91;
color: #ffffff;
font-size: 32px;
line-height: 32px;
}
</style>
</head>
<body style="height:2000px;width:2000px">
<input type="button" value="点击显示弹框或者小区弹框" onclick="DialogS();"/>
<div id="DialogsAlert" class="act_pop">
<a href="javascript:DialogS()" title="关闭"><span class="Dialogs-Close">X</span></a>
<h2 class="act_pop_title">全屏弹框哦</h2>
</div>
<script type="text/javascript">
function DialogS(){
if(!(document.getElementById("Dialogs"))) {
var oHead = document.getElementsByTagName("body")[0];
var oDiv = document.createElement("div");
oDiv.id = "Dialogs";
oDiv.style = "height:100%;width:100%;left:0;top:0;background:#ccc;position:fixed;filter:Alpha(opacity=50);opacity:0.5; -moz-opacity:0.5;";
oHead.appendChild(oDiv);
document.getElementById("DialogsAlert").style.display = "block";
}else if(document.getElementById("Dialogs").style.display == "none"){
document.getElementById("DialogsAlert").style.display = "block";
document.getElementById("Dialogs").style.display = "block";
}else{
document.getElementById("DialogsAlert").style.display = "none";
document.getElementById("Dialogs").style.display = "none";
}
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航