html app从上向下弹框,移动端从底部向上过渡弹出弹框

第一种方法：

把弹框固定在底部，通过过渡弹框高度来实现。下面是完整demo,可复制。

移动从底部向上滑动弹出

.clickBtn{height: 40px;}

.clickBtn button{float: 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;

}

点击试试

• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊
• 啊啊啊啊啊啊啊啊啊啊啊啊啊

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

啦啦啦啦啦啦啦啦啦啦啦啦啦啦

//弹出和消失时间可修改

$(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);

});

});

第二种方法：通过控制位置来实现(待续)

......