Posted in HTML / CSS onJune 09, 2021
上午闲来无事，用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弹窗内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章，希望大家以后多多支持三水点靠木！
html实现弹窗的实例
- Author -
小小文呀声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@