用js html css 写一个关闭弹窗广告功能
时间: 2023-12-13 09:05:59 浏览: 41
好的,下面是一种可能的实现方式:
1. 在 HTML 中添加一个弹窗广告的元素,例如:
```html
<div id="popup-ad">
<img src="广告图片地址" alt="广告">
<button id="close-btn">关闭</button>
</div>
```
2. 在 CSS 中设置弹窗广告元素的样式,例如:
```css
#popup-ad {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
background-color: #fff;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 0 10px #ccc;
}
#popup-ad img {
width: 100%;
height: auto;
}
#close-btn {
display: block;
margin: 20px auto 0;
padding: 10px 20px;
background-color: #ccc;
border: none;
border-radius: 5px;
cursor: pointer;
}
```
3. 在 JS 中添加关闭弹窗广告的事件监听器,例如:
```js
var popup = document.getElementById("popup-ad");
var closeBtn = document.getElementById("close-btn");
closeBtn.addEventListener("click", function() {
popup.style.display = "none";
});
```
这样,当用户点击关闭按钮时,弹窗广告就会消失。请注意,为了使弹窗广告始终显示在屏幕中央,我们在 CSS 中使用了一些定位和居中技巧。