一、需求
1）一般情況下，點擊關閉按鈕隱藏彈窗
2）更多的需求，需要點擊彈窗外圍的透明區域隱藏彈窗
3）增加的需求，彈窗下層的區域不可滑動
二、分析
類似這種彈窗一般都是嵌套的結構，點擊外圍的透明區域需要關閉裏面的彈窗，是由外向裏的一類操作，由此就可以想到了事件的捕獲。
不可滑動則聯想到了定位的fixed屬性。
或者是將頁面設置成一屏幕顯示，其餘隱藏。
三、代碼結構
上下兩層結構，一層彈窗、一層內容。
四、頁面展示
五、解決方式
- css代碼
<style type="text/css">
*{
padding: 0;
margin:0;
text-align: center;
}
.out{
position: fixed;
width:100vw;
height: 100vh;
background: rgba(0,0,0,.5);
z-index: 999;
}
.inner{
position: relative;
width:600px;
height: 800px;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
background: #ffffff;
border-radius: 10px
}
.inner span{
display: block;
position: absolute;
top:20px;
right: 30px;
font-size: 50px;
}
.content{
padding:60px;
font-size: 50px
}
.content p{
font-size: 36px;
text-align: justify;
line-height: 66px
}
.bottom{
width: 100%;
position: fixed;
/*第二種方式
height:100vh;
overflow:hidden;*/
}
.bottom *{
padding:30px;
}
</style>
- html代碼
<main>
//彈窗部分
<div class="out">
<div class="inner">
<span class='close'>X</span>
<div class="content">
<h6>我是內容區域</h6><br>
<p>
我是內容，我是內容，我是內容，我是內容，我是內容，我是內容，我是內容，我是內容，我是內容，我是內容，我是內容，我是內容，我是內容，我是內容，我是內容，我是內容，我是內容，我是內容，我是內容，我是內容，我是內容。
</p>
</div>
</div>
</div>
//底部內容部分
<div class="bottom">
<h3>我是彈窗底部的內容</h3>
<p>我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊我不可以隨意滑動啊</p>
</div>
</main>
- js代碼
<script type="text/javascript">
var close = document.querySelector('.close');
var out = document.querySelector('.out');
var bottom = document.querySelector('.bottom');
//點擊關閉按鈕隱藏彈窗
close.onclick = function(){
out.style.display = 'none';
bottom.style.position = 'static'
//styleChange()第二種方式
}
//點擊透明部分隱藏彈窗
window.onclick = function(event){
if(event.target == out){
out.style.display = 'none'
bottom.style.position = 'static'
}
}
</script>
第二種方式
styleChange(){
var bottom = document.querySelector('.bottom');
bottom.style.height = 'auto';
bottom.style.overflow = 'visible';
}
- jquery代碼
有些頁面$(event.target) == evaluation_explain即可實現，
但是在vue裏面無法實現，後來輸出發現兩個目標是一樣的，但就是無法相等於是使用了數組的形式然後成功了。
$(function(){
var close = $('.close');
var out = $('.out');
var bottom = $('.bottom');
window.onclick = function (event) {
//$(event.target) == evaluation_explain普通頁面也可實現
if ($(event.target)[0] == evaluation_explain[0]) {
evaluation_explain.hide();
}
}
})
六、問題
- 底部內容不會滑動，但是fixed佈局會使內容有變化
- ios實現會有問題（解決：只要將window改成最外層元素即可例如本題就是window==>out）