html带有滚动条的弹窗
时间: 2023-08-21 21:12:26 浏览: 51
你可以使用CSS和JavaScript来创建一个带有滚动条的弹窗。
首先,你需要创建一个HTML元素作为弹窗的容器,例如:
```html
<div class="popup-container">
<div class="popup-content">
<!-- 弹窗内容 -->
</div>
</div>
```
接下来,你需要使用CSS来设置弹窗容器的样式:
```css
.popup-container {
position: fixed; /* 固定位置 */
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
display: flex;
justify-content: center;
align-items: center;
z-index: 9999; /* 设置层级 */
}
.popup-content {
max-width: 90%; /* 弹窗最大宽度 */
max-height: 90%; /* 弹窗最大高度 */
overflow-y: auto; /* 垂直滚动条 */
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
```
最后,你需要使用JavaScript来控制弹窗的显示和隐藏:
```javascript
const popupContainer = document.querySelector('.popup-container');
const popupContent = document.querySelector('.popup-content');
function showPopup() {
popupContainer.style.display = 'flex';
}
function hidePopup() {
popupContainer.style.display = 'none';
}
// 点击按钮显示弹窗
document.querySelector('.open-popup-btn').addEventListener('click', showPopup);
// 点击弹窗外部或关闭按钮隐藏弹窗
popupContainer.addEventListener('click', (event) => {
if (event.target === popupContainer) {
hidePopup();
}
});
document.querySelector('.close-popup-btn').addEventListener('click', hidePopup);
```
这样,你就可以创建一个带有滚动条的弹窗了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)