写一个首页弹窗图片带样式的demo
时间: 2023-05-22 21:06:01 浏览: 78
好的,以下是一个首页弹窗图片带样式的示例代码:
HTML:
```
<div class="popup">
<img src="popup-img.jpg" alt="弹窗图片">
<div class="popup-text">
<h2>特别优惠!</h2>
<p>点击此链接领取优惠券</p>
<a href="#" class="btn">领取优惠券</a>
</div>
<button class="close-btn">X</button>
</div>
```
CSS:
```
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #ccc;
box-shadow: 0 0 10px #ccc;
background-color: #fff;
padding: 20px;
z-index: 999;
}
.popup img {
width: 100%;
height: auto;
margin-bottom: 20px;
}
.popup-text h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.popup-text p {
font-size: 18px;
margin-bottom: 20px;
}
.popup-text .btn {
display: inline-block;
background-color: #ff6600;
color: #fff;
padding: 10px 20px;
font-size: 18px;
border-radius: 5px;
text-decoration: none;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
background-color: transparent;
border: none;
font-size: 24px;
font-weight: bold;
cursor: pointer;
}
```
JavaScript:
```
const popup = document.querySelector('.popup');
const closeBtn = document.querySelector('.close-btn');
closeBtn.addEventListener('click', () => {
popup.style.display = 'none';
});
// 如果你想要这个弹窗在用户第一次访问网站时显示,并且之后不再显示,可以添加以下代码:
const alreadyShown = localStorage.getItem('popupShown');
if (alreadyShown !== 'true') {
popup.style.display = 'block';
localStorage.setItem('popupShown', 'true');
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)