[转]html实现弹窗的实例
html实现弹窗的实例
·
上午闲来无事，用html及原生js写个弹窗，供参考。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
margin: 0px;
}
.zhezhao{
position: fixed;
left: 0px;
top: 0px;
background: #000;
width: 100%;
height: 100%;
opacity: 0.5;
}
.tankuang{
position: relative;
background: #fff;
width: 50%;
height: 80%;
border-radius: 5px;
margin: 5% auto;
}
#header{
height: 40px;
}
#header-right{
position: absolute;
width: 25px;
height: 25px;
border-radius: 5px;
background: red;
color: #fff;
right: 5px;
top: 5px;
text-align: center;
}
</style>
</head>
<body>
<button type="button" onclick="dianwo()">点我</button>
<div class="zhezhao" id='zhezhao'>
<div class="tankuang">
<div id="header">
<span>我是弹窗</span>
<div id="header-right" onclick="hidder()">x</div>
</div>
</div>
</div>
<script type="text/javascript">
document.getElementById('zhezhao').style.display="none";
function dianwo(){
document.getElementById('zhezhao').style.display="";
}
function hidder(){
document.getElementById('zhezhao').style.display="none";
}
</script>
</body>
</html>
<style>
.zhezhao{
position: fixed;
left: 0px;
top: 0px;
/*background: #000;*/
width: 100%;
height: 100%;
opacity: 0.7;
}
.tankuang{
position: relative;
background: #000;
width: 150px;
height: 50px;
border-radius: 5px;
top: 50%;
}
#header{
height: 40px;
display: flex;
}
#header-right{
position: absolute;
width: 25px;
height: 25px;
border-radius: 5px;
background: red;
color: #fff;
right: 5px;
top: 5px;
text-align: center;
}
</style>
<center>
<div class="zhezhao" id='zhezhao'>
<div class="tankuang">
<div id="header">
<span style="color:#ffffff; font-size:20px;margin: auto;line-height: 50px;" id="layer_msg">复制成功</span>
</div>
</div>
</div>
</center>
<scrtip>
document.getElementById('zhezhao').style.display="none";
function dianwo(str){
document.getElementById('layer_msg').innerHTML = str;
document.getElementById('zhezhao').style.display="";
setTimeout(function(){
document.getElementById('zhezhao').style.display="none";
},5000);
}
</scrtip>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)