第一種方法：

把彈框固定在底部，通過過渡彈框高度來實現。下面是完整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);

});

});

第二種方法：通過控制位置來實現(待續)

......

總結

以上是生活随笔為你收集整理的html app从上向下弹框,移动端从底部向上过渡弹出弹框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。