web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
弹出层
响应式Google Material Design风格js模态窗口插件
分类:
弹出层
日期:
2024-05-14
点击(5)
评论(0)
演 示
免费下载
简介
该模态窗口使用CSS3来驱动动画效果,整个效果的关键也在于这些动画,它给了这个模态窗口Material Design的视觉效果。 ##### HTML结构 在这个效果中,点击按钮后放大的元素不是按钮本身或模态窗口,它实际上是一个动态添加的div。这个div被创建时大小和按钮尺寸相等,并使用js代码来扩大它。当实际的模态窗口变为可见状态时,在动态的移除这个div。基本的模态窗口的HTML结构如下: ```html
Modal 1
Modal
...
``` 模态窗口的触发按钮上的data-modal由于指定该按钮用于触发哪个模态窗口,这是一个唯一的ID标识符。 模态窗口的关闭按钮使用的是SVG,它的颜色在CSS中控制。 ##### CSS样式 模态窗口中的内容使用Flex来布局。变为动画添加了特殊贝兹曲线的CSS过渡效果。 ```html .modal { will-change: visibility, opacity; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; overflow-x: hidden; z-index: 1000; visibility: hidden; opacity: 0; -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition-delay: 0s; transition-delay: 0s; } ``` 为了制作响应式效果,该模态窗口没有指定固定的大小,而是指定了padding,靠实际的内容来填充模态窗口。 ```html .modal__content { will-change: transform, opacity; position: relative; padding: 2.4rem; background: #ffebee; background-clip: padding-box; box-shadow: 0 12px 15px 0 rgba(0,0,0,0.25); opacity: 0; -webkit-transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1); } ``` ##### JAVASCRIPT 当用户点击了模态窗口触发按钮,通过该按钮的data-modal属性可以知道是哪个模态窗口被触发了。同时,插件会在按钮上方出入一个占位
,并计算出它移动扩大到屏幕中间所需要的值。当模态窗口动画结束的时候,模态窗口会被添加一个active class,使模态窗口和按钮和占位
具有相同的背景颜色,看起来就像是按钮被放大了一样。但实际上这里是三个不同的元素。 创建占位div的代码如下: ```html var makeDiv = function(self, modal) { var fakediv = document.getElementById('modal__temp'); /** * if there isn't a 'fakediv', create one and append it to the button that was * clicked. after that execute the function 'moveTrig' which handles the animations. */ if (fakediv === null) { var div = document.createElement('div'); div.id = 'modal__temp'; self.appendChild(div); moveTrig(self, modal, div); } }; ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告