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

});

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

......

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

微信小程序自定义弹出模态框禁止底部滚动
图示: wxml代码: <view class='fix_bottom'> <view>分享</view> <view>电话咨询</view> ...
ajax弹出提示框,Ajax环境下弹出提示框
在普通的ASP.NET环境中,我们要想在WEB窗体上弹出一个对话框,经常用到的是如下代码: Response.Write(""); 然而在Ajax的环境中却不能使用上述的代码,否则 ...
如何让竖行文本框从下往上_如何在Office文档中插入(使用)横排、竖排文本框并设置文字方向...
①:为什么要使用文本框? 文本框相当于一个容器,里面可以容纳文字对象!放置于文本框的文字对象,基于文本框,可形成一个统一的整体: ②:使用文本框有什么好处? 作为一个容器,文本框就像图片对象一样,周边 ...
js实现日历框上一日下一日_一日三项令人兴奋的Lucene功能
js实现日历框上一日下一日昨天是富有成效的一天:突然,Lucene有了三个令人兴奋的新功能. 表达式模块昨天提交的第一个功能是新的expressions模块 . 这使您可以使用任意String表达 ...
ASP.NET中WEB上弹出消息框的N种方法（为了以后方便，转了很多网友的文章！希望不会介意）...
ASP.NET中WEB上弹出消息框的N种方法第一个确定之后跳转到另一页面,第二个确定之后返回前一页 Response.Write("<script langage='javascri ...
layer 父弹出框上弹出子弹框窗体大小问题
在父弹框上继续弹出子弹框,因为是iframe,子弹框窗体只能显示在父弹框的窗体区域内. 如果子弹框的窗体大小超过了父弹框,则子弹框的界面无法显示全. 有没有办法解决这个问题? 让子弹窗不被限制在父弹框 ...
nplayer,es文件浏览器等进行局域网连接时登录不上或者不断弹出登录框的问题
可能会出现一直连接却连接不上,或者不断弹出登录框的问题解决方法: 出现问题的原因名称与系统默认的不符.如果是邮箱的微软账号作为计算机名称,系统会默认使用前五个字符. 1.运行 netplwiz ( ...
如何让竖行文本框从下往上_word文档字体一句话排成一上一下，怎样把一个横着排列的word文档的字体改为从上到下竖着排列？...
怎样把一个横着排列的word文档的字体改为从上到下竖着排列? 以word2007,说明如下: 选中竖排的内容,依次点击"页面布局"."文字方向"."垂 ...
简单实现CSS导航栏二级菜单从上往下平滑滑下弹出效果
页面样式如下: html: <li><div class="nav-tab">技术分析</div><ul class="nav- ...

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

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

最新文章

热门文章