js制作首次点击页面出现弹窗

最新推荐文章于 2023-08-21 21:59:00 发布

CQXXTXX

最新推荐文章于 2023-08-21 21:59:00 发布

阅读量1.4k

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/CQXXTXX/article/details/127836998

版权

使用js实现首次进入页面时出发弹窗，之后刷新页面也不会出现

除非关闭网页重新打开，否则不会弹出第二次

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

.xxx {
width: 100%;
height: 31.25rem;
/* display: flex; */

}

.xxx input {
width: 20px;
height: 20px;
float: right;
margin-top: 2px;
position: sticky;

}

.xxx p {
text-align: center;
margin-top: 50px;
display: inline-block;
}

/* .xxtx {

} */

.x1 {
width: 100%;
height: 200px;
background-color: #333333;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
}

.x1 img {
width: 60px;
height: 60px;
margin-left: 20px;
margin-top: 20px;
border-radius: 38px;
}

.xx {
width: 75%;
height: 300px;
background-color: antiquewhite;
margin-top: 6.25rem;
border-radius: 20px;
margin-left: 12.5%;
/* position: fixed; */
position: absolute;
display: flex;
}

.banner {
width: 90%;
height: 150px;
margin-left: 5%;
margin-top: -95px;
border-radius: 8px;
}

.list {
width: 100%;
height: 150px;
border-radius: 8px;
overflow: hidden;
}

.and {
width: 300%;
height: 150px;
border-radius: 8px;
}

.and img {
width: 33.33%;
/* height: 150px; */
border-radius: 8px;
float: left;
object-fit: inherit;
}
</style>
</head>
<body>
<!--html 开平弹窗开始制作 -->
<div class="xx">
<div class="xxx">
<input type="image" src="img/专属商品.png" onclick="fn()">
<p>回馈活动,精彩活动,马上上线,敬请期待吧</p>
</div>
<div class="x1">
<img src="img/jay.jpg">
</div>

<script type="text/javascript">
let xx = document.getElementsByClassName("xx");
let bun = sessionStorage.getItem('tuu');
if (bun == '1') {
xx[0].style.display = 'none';
}
function fn() {
xx[0].style.display = 'none';

sessionStorage.setItem('tuu', '1');
}
</script>
</body>
</html>

因为是自己练习时写的，所以样式写的非常草率，若需要可以自己改一下。