h5 滑动弹框实例

最新推荐文章于 2023-11-21 14:38:35 发布

重案组之虎曹达华

最新推荐文章于 2023-11-21 14:38:35 发布

阅读量1.7k

点赞数

分类专栏： js jq

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

版权

jq 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

本插件需要引入zepto.min.js，大家自行下载

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>h5弹框</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	
</head>
<body>
<div class="wtw-wp">
	<div class="wtw-btn">
		<button class="wtw-btn1">弹框一</button>
		<button class="wtw-btn2">弹框二</button>
	</div>
</div>
</body>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</html>

*{margin:0; padding: 0;}
body {background: #fff; font-size: 14px; font-family: "微软雅黑";color: #333;}
.show{display: block};
.hide{display: none;}
.wtw-wp {position: fixed; width: 100%; height: 100%; top: 0;}
.wtw-btn {position: absolute; top: 30%; width: 80%;left: 0; right: 0;margin:0 auto; text-align: center;}
.wtw-btn button {width: 50%; display: block; margin: 0 auto; height: 40px; line-height: 40px; margin-bottom: 20px;}

/*弹框*/
.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;}
.wtw-pop2-con {position: fixed; top: -120px;left: 0; right: 0; width: 80%;z-index: 12; margin:0 auto; background: #fff; border-radius: 5px; overflow: hidden; padding: 15px;}
.wtw-pop2-con-wp {width: 100%;}
.pop2-tit {padding: 0 5px;text-align: center; line-height: 20px;}
.pop2-tit strong {font-size: 16px; font-weight: 400;}
.tit-span1 {float: left; color: #999}
.tit-span2 {float: right; color: #428bca}
.pop2-text {width: 100%; margin-top:15px; border-radius: 5px; max-height: 120px; min-height: 120px; box-sizing: border-box; padding:10px; border-color: #bbb; color: #999;}
.pop2-text::placeholder {color: #999;}

$(document).ready(function(){

	var btn1 = $('.wtw-btn1')
	var btn2 = $('.wtw-btn2')
	var pop1 = $('.wtw-pop1')

	function box1(value1,value2){
		let str = '<div class="wtw-pop wtw-pop1">'+
					'<div class="wtw-pop-bg wtw-pop-bg1"></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;			
	}

	function box2(value){
		let str = '<div class="wtw-pop wtw-pop1">'+
					'<div class="wtw-pop-bg wtw-pop-bg2"></div>'+
					'<div class="wtw-pop2-con">'+
					'<div class="wtw-pop2-con-wp">'+
					'<div class="pop2-tit"><span class="tit-span1">取消</span><strong>'+value+'</strong><span class="tit-span2">提交</span></div>'+
					'<textarea class="pop2-text" placeholder="请输入......"></textarea>'
					'</div></div></div>'
		return str;			
	}


	//点击弹框一
	btn1.on('click',function(){
		$('body').append(box1('删除','取消'));
		$('.wtw-pop1-con').animate({
			bottom:'20px'
		},300);
	})

	//点击弹框二
	btn2.on('click',function(){
		$('body').append(box2('发布留言'));
		$('.wtw-pop2-con').animate({
			top:'40px'
		},300);
	})

	//点击背景一
	$(document).on('click','.wtw-pop-bg1',function(){
		$('.wtw-pop1-con').animate({
			bottom:'-100px'
		},300);
		setTimeout(function () { $('.wtw-pop').remove(); }, 300);
	})

	//点击背景二
	$(document).on('click','.wtw-pop-bg2',function(){
		$('.wtw-pop2-con').animate({
			top:'-120px'
		},300);
		setTimeout(function () { $('.wtw-pop').remove(); }, 300);
	})

})