【实测】html实现弹窗 DIV+CSS弹窗代码

来自版块: Discuz教程发表于: 2020-5-7 19:24:36

26986

用html及原生js写个弹窗，供参考

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>【实测】html实现弹窗 DIV+CSS弹窗代码</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>