弹出框

Posted 她的睫毛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了弹出框相关的知识,希望对你有一定的参考价值。

<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
.t1{
width: 305px;
height: 195px;
background-color: hotpink;
position: fixed;
z-index: 2;
}
.t2{
width: 100%;
background-color: black;
opacity: 0.3;
position: fixed;
top: 0px;
left: 0px;
z-index: 1;
}
</style>
</head>
<body>
<input type="button" id="tan" value="&rarr;">
<div class="t1" hidden="hidden"></div>
<div class="t2" hidden="hidden"></div>
</body>
</html>
<script>
tan=document.getElementById("tan");
t1=document.getElementsByClassName("t1")[0];
t2=document.getElementsByClassName("t2")[0];

ah=document.documentElement.clientHeight;
aw=document.documentElement.clientWidth;

t2.style.height=ah+"px";

t1.style.top=ah/2-97.5+"px";
t1.style.left=aw/2-152.5+"px";

tan.onclick=function(){
t1.removeAttribute("hidden");
t2.removeAttribute("hidden");
}
t2.onclick=function(){
t1.setAttribute("hidden","hidden");
t2.setAttribute("hidden","hidden");
}
window.onresize=function(){
ah=document.documentElement.clientHeight;
aw=document.documentElement.clientWidth;

t2.style.height=ah+"px";

t1.style.top=ah/2-97.5+"px";
t1.style.left=aw/2-152.5+"px";
}


</script>

以上是关于弹出框的主要内容,如果未能解决你的问题,请参考以下文章

js弹出框对话框提示框弹窗总结

(转)js弹出框对话框提示框弹窗总结

隐藏弹出框控制器

Web自动化测试10:Selenium下拉选择框弹出框滚动条操作

java swing Jpanel 怎么添加一个Jdialog弹出框

bootstrap 怎么实现在弹出框上再弹出模态框