移动端从底部向上过渡弹出弹框
Posted caozhuzi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端从底部向上过渡弹出弹框相关的知识，希望对你有一定的参考价值。
第一种方法：
把弹框固定在底部，通过过渡弹框高度来实现。下面是完整demo,可复制。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>移动从底部向上滑动弹出</title>
<style type="text/css">
.clickBtnheight: 40px;
.clickBtn buttonfloat: right;
.willAlert
position:absolute;
left:0;
bottom: 0;
width:100%;
height: 0;
overflow: hidden;
z-index:9;
background: #dedede;
transition: all 5s ease; /*弹出时间*/
.willAlert div
box-sizing: border-box;
padding:20px;
</style>
</head>
<body>
<div class="clickBtn">
<!--点击后隐藏的div从底部滑上来-->
<button>点击试试</button>
</div>
<div>
<ul>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
</ul>
</div>
<div class="willAlert">
<div>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
啦啦啦啦啦啦啦啦啦啦啦啦啦啦
</div>
</div>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
// 弹出和消失时间可修改
$(function()
$(".clickBtn button").click(function()
$(‘body‘).css(
‘height‘:‘100%‘,
‘overflow‘:‘hidden‘
);
$(‘.willAlert‘).css(
‘height‘: ‘200px‘
);
);
$(document).on(‘click‘,‘.willAlert‘,function()
$(this).css(
‘height‘:0,
// 消失时间
‘transition‘: ‘all 10s ease‘
);
// 此处如果需要可以用计时器（弹框关闭后，页面才能上下滑动）
setTimeout(function()
$(‘body‘).css(
‘height‘:‘auto‘,
‘overflow‘:‘visible‘
);
// 消失时间
, 10000);
);
);
</script>
</body>
</html>
第二种方法：通过控制位置来实现（待续）
......
以上是关于移动端从底部向上过渡弹出弹框的主要内容，如果未能解决你的问题，请参考以下文章