上午闲来无事，用ht ML 及原生j S写 个弹窗，供参考。
<!DOCTY PE html>
<html>
<head>
< ;m eta charset="utf-8" />
<t IT le></title>
<style type="text/css">
body{
m arg in: 0px;
}
.zhezhao{
position: fixed;
left: 0px;
top: 0px;
background: # 000;
width: 100%;
h ei ght: 100%;
opacity: 0.5;
}
.tankuang{
position: relative;
background: #fff;
width: 50%;
height: 80%;
border-radius: 5px;
mar gin : 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.dis play ="none";
function dianwo(){
document.getElementById('zhezhao').style.display="";
}
function hidder(){
document.getElementById('zhezhao').style.display="none";
}
</script>
</body>
</html>
到此这篇关于html实现弹窗的实例的 文章 就介绍到这了,更多相关html弹窗内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 html实现弹窗的实例 全部内容，希望文章能够帮你解决 html实现弹窗的实例 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did211593