html 遮罩层在底部,底部弹出遮罩层.html

底部弹出遮罩层

* {

padding: 0;

margin: 0;

}

#content {

position: relative;

z-index: 0;

height: 100vh;

background: #ccc;

overflow-y: scroll;

}

.foot {

opacity: 0;

position: absolute;

z-index: 10;

top: 100%;

width: 100%;

min-height: 100vh;

background: #0f0;

}

弹出遮罩层

关闭弹出层

//$(selector).animate({

//params

//}, speed, callback);

//必需的 params 参数定义形成动画的 CSS 属性。

//可选的 speed 参数规定效果的时长。它可以取以下值： "slow"、

//"fast"

//或毫秒。

//可选的 callback 参数是动画完成后所执行的函数名称。

$("#register").on('click', function() {

$(".foot").animate({

top: '0px',

opacity: 1,

}, 500);

})

$(".foot").on('click', function() {

$(".foot").animate({

top: '100%',

opacity: 0,

}, 10);

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史

html 遮罩层在底部,底部弹出遮罩层.html相关推荐

html5鼠标点击弹出层,jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
本文实例讲述了jQuery实现单击弹出Div层窗口效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现 ...
android实现底部弹出菜单,Android实现底部缓慢弹出菜单
项目要求要做一个从底部缓慢弹出一个Button Menu 开始编码: MyselfFragment package io.dcloud.H5B79C397.fragment; import andro ...
Android之靠谱的Activity从底部向上弹出，finish从顶部向下消失（不黑屏）
1 .需求要求Activity从底部向上弹出,finish从顶部向下消失(不黑屏) 2.解决办法准备3个动画xml文件 app_bottom_in.xml <?xml version=&qu ...
jquery 弹出遮罩层
jquery 弹出遮罩层点击层关闭转载于:https://blog.51cto.com/ming358721/423505
移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究
移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究参考文章: (1)移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究 (2)https://www.cnblogs.com/ranyon ...
仿闲鱼底部菜单html,GitHub - 494293346/rotateMenu: 仿闲鱼首页，“底部加号弹出菜单选项” 界面，动画效果可能跟闲鱼有点不一样...
rotateMenu 仿闲鱼首页,"底部加号弹出菜单选项" 界面,动画效果可能跟闲鱼有点不一样 ##简介仿闲鱼首页,"底部加号弹出菜单选项" 界面,动画效果可 ...
js ajax 点击遮罩层,jQuery弹出遮罩层效果完整示例
本文实例讲述了jQuery弹出遮罩层效果.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition ...
html注释图案,jQuery图片点击弹出遮罩层标记注释特效
这是一款简单的.非常实用的jQuery图片点击弹出遮罩层标记注释特效. HTML html结构非常简单.使用一个portfolio作为wrapper,在里面可以添加多个portfolio_item. ...
JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

html 遮罩层在底部,底部弹出遮罩层.html

html 遮罩层在底部,底部弹出遮罩层.html相关推荐

最新文章

热门文章