弹窗点击透明部分隐藏（阴影部分隐藏）

一、需求

1）一般情况下，点击关闭按钮隐藏弹窗
2）更多的需求，需要点击弹窗外围的透明区域隐藏弹窗
3）增加的需求，弹窗下层的区域不可滑动

二、分析

类似这种弹窗一般都是嵌套的结构，点击外围的透明区域需要关闭里面的弹窗，是由外向里的一类操作，由此就可以想到了事件的捕获。
不可滑动则联想到了定位的fixed属性。
或者是将页面设置成一屏幕显示，其余隐藏。

三、代码结构

上下两层结构，一层弹窗、一层内容。

四、页面展示

五、解决方式

1. 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>

2. 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>

3. 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';
        }

4. 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();
            }
        }
 })

六、问题

1. 底部内容不会滑动，但是fixed布局会使内容有变化
2. ios实现会有问题（解决：只要将window改成最外层元素即可例如本题就是window==>out）