JQuery弹出层,实现弹层切换,可显示可隐藏。
时间: 2024-02-18 13:01:25 浏览: 28
可以使用JQuery的`show()`和`hide()`方法来实现弹层的可显示可隐藏。具体步骤如下:
1. HTML结构
```
<div class="popup-container">
<div class="popup" id="popup1">
<!-- 弹层1的内容 -->
</div>
<div class="popup" id="popup2">
<!-- 弹层2的内容 -->
</div>
</div>
```
2. CSS样式
```
.popup-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: none; /* 初始时隐藏 */
}
.popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
width: 400px;
height: 200px;
padding: 20px;
display: none; /* 初始时隐藏 */
}
```
3. JQuery代码
```
$(document).ready(function() {
// 显示弹层1
$('#popup1-btn').click(function() {
$('.popup-container').show();
$('#popup1').show();
});
// 显示弹层2
$('#popup2-btn').click(function() {
$('.popup-container').show();
$('#popup2').show();
});
// 隐藏弹层
$('.popup-container').click(function() {
$('.popup-container').hide();
$('.popup').hide();
});
});
```
在上面的代码中,我们使用了`show()`方法来显示弹层,`hide()`方法来隐藏弹层。通过给弹层容器添加`click`事件,可以实现点击弹层外部区域时隐藏弹层的效果。
相关推荐
![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)