html实现弹窗的实例
发布时间：2021-06-09 16:59:24 作者：小小文呀 
我要评论
我要评论本文将结合实例代码，介绍html实现弹窗的实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
上午闲来无事，用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弹窗内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
这篇文章主要介绍了css实现弹窗上下左右居中且背景透明锁定窗口效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参2020-12-23
这篇文章主要介绍了CSS实现带遮罩层可关闭的弹窗效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-03-09- 本篇文章主要介绍了CSS导航栏及弹窗示例代码，导航栏和弹窗是在web中应用很广泛的，非常具有实用价值，需要的朋友可以参考下。2017-01-10
- 下面小编就为大家带来一篇弹窗居中的简单实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-25
- 弹窗式的新闻在国内互联网服务中屡见不鲜，实时推送的方式对网站扩大覆盖面非常有效2012-07-31
- 用到遮罩弹窗时在网上搜索，看到绝大多数都是基于Jquery的。我不想用那么复杂的应用，于是自己写了一个。2011-07-27
- 在从传统的Software逐渐转换到Webware的大潮中，设计模式与技术实现双重变革和推进下。我们提倡页面中的任务对应用户群明确，任务少而精。回到我们传统的后台软件系统中，2008-10-17
最新评论