필요시
일반적으로 1 미만)을 닫기 폭탄에 윈도우 닫기 버튼
2) 더 많은 수요가 팝업 팝업 외주 클릭 투명 영역 필요성 숨길
3)의 수요 증가가 아닌 슬라이딩 하부 팝
둘째, 분석은
일반적으로 팝업 닫힌 내부로 투명 영역 필요성 외주 클릭 중첩 된 구조를 나타 비슷 이벤트 캡처 생각 될 수있는 클래스의 작업의 외부에서 내부로한다.
우리는 고정 된 슬라이드 건물의 위치는 생각할 수 없다.
또는 페이지가 화면에 숨겨진 나머지를 표시하도록 설정되어 있습니다.
세 번째의 코드 구조
상하 2 층 구조, 팝, 하나 개의 콘텐츠의 층. 
넷째, 보여주는 페이지
오 개 솔루션을
- 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();
}
}
})
여섯 문제
- 슬립하지 않습니다 내용의 하단하지만 고정 레이아웃 메이크업 내용 변경
- IOS는 문제 (: 소자의 최 외층에 윈도우가 될 수만큼 긴, 예를 들어,이 문제는 창 ==> 아웃들을 해결)가 실현
