------------------------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';
})
})()
复制代码