Click the pop-transparent partially hidden

A demand
under 1) In general, the window close button to hide bombs
2) more demand, to hide the transparent region need to click pop pop periphery
3) increased demand, non-slidable lower region pop

Second, the analysis
is similar to that usually pop nested structure, click on the periphery of the transparent area need to be closed inside of pop, is from outside to inside of a class action, which can be thought of capturing the event.
We can not think of a fixed slide the property location.
Or the page is set to display a screen, the rest hidden.

Third, the code structure of
the upper and lower two-layer structure, a layer of pop, one content.
Fourth, the page showing

five solutions

1. css code

<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 code

<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 code

<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 code that
   some pages $ (event.target) == evaluation_explain can be realized,
   but can not be achieved in vue inside, and later found two output target is the same, but that is not equal then uses an array and then succeeded.

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

Six issues

1. The bottom of the content will not slip, but fixed layout make content changes
2. ios realize there is a problem (to solve: As long as the window into the outermost layer of the element can be, for example, this question is the window ==> out)