移动端 弹窗

------------------------html

<div class="moda2">
		<div class="modal-info center-self-xy mYBounceInDown ">
			<div class="modal-t ">
				
				
				
			</div>
			
			<div class="modal-b clearfix">
				<button class="fr sure">关闭</button>
			</div>
		</div>
	</div>
复制代码

------------------------css

.modal,.moda2,.moda3 {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0,0,0,.5);
  z-index: 9999;
  display: none;
}
.modal-info  {
  width:90%;
  height: 85%;
  margin: 15% auto 0;
  background-color: #fff;
  border-radius: 0.1rem;
  padding: 0.05rem;
  box-sizing:border-box;
}
.modal-t {
  height:80%;
  position: relative;
  margin: 0.05rem;

}
.modal-t hgroup {
  width: 100%;  
  font-size: 0.4rem;
  font-weight: 700;
  line-height: 0.9rem;
  text-align: center;

}
.modal-t .xuzhi{
    height: 87%;
    overflow-y: auto;
    text-align: justify;
    position: relative;
    border: 1px solid #ededed;
    padding: 0.2rem;
    box-sizing: border-box;
}
.modal-t .xuzhi header{
  text-align: center;
    font-size: 0.4rem;
    font-weight: bold;
    margin-top: 0.3rem;
}
.modal-t .xuzhi hgroup{
   font-size: 0.32rem;
    line-height: 0.4rem;
    margin-top: 0.3rem;
}
.modal-t .xuzhi ul li hgroup{
    text-align: left;
    font-size: 0.3rem;
    line-height: 0.5rem;
    margin-top: 0.2rem;
}
.modal-t .xuzhi ul li p{
    text-align: justify;
    text-indent: 2em;
    font-size: 0.26rem;
    color: #666666;

}
.modal-b {
  padding-top: 0.2rem;
  text-align: center;
}

.sure{
  width: 80%;
  height: 1rem;
  background: #f9bb00;
  color: #fff;
  font-size: 0.32rem;
  background-color: #f9bb00;
  color: #fff;
}

.mYBounceInDown {
  animation: mYBounceInDown ease 1s forwards;
}
复制代码

------------------------js

;(function(){
    var del = document.querySelector('#del-wrap');
    var del1 = document.querySelector('#del-wrap_1');
    // var tipsTiaokuang = document.querySelector('.tips_tiaokuang');
    var tipsTiaokuang = $('.tips_tiaokuang');
    // console.log(del);
    var modal = document.querySelector('.modal');
    var moda2 = document.querySelector('.moda2');
    var moda3 = document.querySelector('.moda3');
    var gz = null;
    	del.addEventListener('click',function(){
    	
    		modal.style.display = 'block';
    
    	})
    	// 保险条例按钮
    	del1.addEventListener('click',function(){
    			tipsTiaokuang.slideToggle(2000);
    		
    	// 	if (tipsTiaokuang.classList.contains('yincang')==true) {
    	// 		tipsTiaokuang.classList.remove("yincang");
    		
    
    	// }else{
    	// 		tipsTiaokuang.classList.add("yincang");
    	// 	}
    		
    	})
    
    	
    	var sure = document.querySelectorAll('.sure');
    	
    	sure[0].addEventListener('click',function(){
    		// 关闭模态框
    		modal.style.display = 'none';
    
    		// 关闭盖子
    	})
    	
    	
    		sure[1].addEventListener('click',function(){
    		// 关闭模态框
    		moda2.style.display = 'none';
    		
    	})
    		sure[2].addEventListener('click',function(){
    		// 关闭模态框
    		moda3.style.display = 'none';
    		
    	})

	})()
复制代码