手机端zepto.js点击滑动显示隐藏
程序员文章站
2022-05-03 18:03:42
...
var btn1 = $('.wtw-btn1') //弹框一
function box1(value1,value2){
let str = '<div class="wtw-pop wtw-pop1">'+
'<div class="wtw-pop-bg"></div>'+
'<div class="wtw-pop1-con">'+
'<div class="wtw-pop-btn wtw-pop-del"><span>'+value1+'</span></div>'+
'<div class="wtw-pop-btn wtw-pop-off"><span>'+value2+'</span></div>'+
'</div></div>'
return str;
}
//点击弹框一
btn1.on('click',function(){
$('body').append(box1('删除','取消'))
$('.wtw-pop1-con').animate({ //动画效果显示
bottom:'20px'
},300);
})
//点击背景
$(document).on('click','.wtw-pop-bg',function(){
$('.wtw-pop1-con').animate({ //动画效果隐藏
bottom:'-100px'
},300);
setTimeout(function () { $('.wtw-pop').remove(); }, 300);
})
/*弹框*/
.wtw-pop {position: fixed;width: 100%;top: 0; height: 100%; z-index: 10;}
.wtw-pop-bg {position: fixed;top: 0; width: 100%; height:100%;z-index: 11; background:rgba(0,0,0,.5);}
.wtw-pop1-con {position: fixed; bottom: -100px;left: 0; right: 0; width: 90%;z-index: 12; margin:0 auto; background: #fff; border-radius: 5px; overflow: hidden;}
.wtw-pop-btn {height: 45px; line-height: 45px;text-align: center; }
.wtw-pop-off {color: #999;border-top: 1px solid #eee;}
推荐阅读