js弹出层

最新推荐文章于 2023-07-25 21:45:36 发布

cmj8043719242

最新推荐文章于 2023-07-25 21:45:36 发布

阅读量237

点赞数

分类专栏： html

原文链接：https://www.cnblogs.com/Fourteen-Y/p/11765174.html

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹框</title>
<script src="jquery-9.2.js"></script>
<style>
/*背景层*/
#popLayer {
display: none;
background-color: #000;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
opacity:0.6;
}

/*弹出层*/
#popBox {
display: none;
background-color: #FFFFFF;
z-index: 11;
width: 300px;
height: 300px;
position:fixed;
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
}
/*关闭按钮*/
#popBox .close{
text-align: right;
margin-right: 5px;
background-color: #F8F8F8;
}
#popBox .close a {
text-decoration: none;
color: #2D2C3B;
}
</style>
</head>
<body>
<input type="button" name="popBox" value="弹出框" 0nclick="popBox()">
<div id="popLayer"></div>
<div id="popBox">
<div class="close">
<a href="javascript:void(0)" 0nclick="closeBox()">关闭</a>
</div>
<div class="content">hi im here!</div>
</div>

/*点击关闭按钮*/
function closeBox() {
var popBox = document.getElementById("popBox");
var popLayer = document.getElementById("popLayer");
popBox.style.display = "none";
popLayer.style.display = "none";
}
</script>
</body>
</html>

cmj8043719242

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js弹出层

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>弹框</title> <script src="jquery-9.2.js"></script> <style> ...
复制链接

扫一扫