手机端zepto.js点击滑动显示隐藏

最新推荐文章于 2021-02-03 17:31:43 发布

重案组之虎曹达华

最新推荐文章于 2021-02-03 17:31:43 发布

阅读量1.7k

点赞数

分类专栏： jq

本文链接：https://blog.csdn.net/wtw945/article/details/81141736

版权

jq 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

    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;}