html实现弹窗的实例

发布者: 404号房间 | 发布时间: 2025-6-16 12:23| 查看数: 60| 评论数: 0|帖子模式

上午闲来无事，用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>

复制代码

到此这篇关于html实现弹窗的实例的文章就介绍到这了,更多相关html弹窗内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/html5/778542.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

html实现弹窗的实例

最新评论

新人须知

常见问题

维权申诉

关注微博

扫描微信

关于合作

通讯联系