这是一款效果非常酷的Google Material Design风格js模态窗口插件。该模态窗口采用Material Design的扁平风格,界面清晰时尚。在模态窗口中可以嵌入文字、图片、视频等任何HTML元素。
制作方法
该模态窗口使用CSS3来驱动动画效果,整个效果的关键也在于这些动画,它给了这个模态窗口Material Design的视觉效果。
HTML结构
在这个效果中,点击按钮后放大的元素不是按钮本身或模态窗口,它实际上是一个动态添加的<div>
。这个<div>
被创建时大小和按钮尺寸相等,并使用js代码来扩大它。当实际的模态窗口变为可见状态时,在动态的移除这个<div>
。基本的模态窗口的HTML结构如下:
<!--模态窗口触发按钮--> <a href="" data-modal="#modal" class="modal__trigger">Modal 1</a> <!--模态窗口--> <div id="modal" class="modal modal__bg" role="dialog" aria-hidden="true"> <div class="modal__dialog"> <div class="modal__content"> <h1>Modal</h1> <!--内容--> <p>...</p> <!-- 模态窗口关闭按钮 --> <a href="" class="modal__close demo-close"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/><path d="M0 0h24v24h-24z" fill="none"/></svg> </a> </div> </div> </div>
模态窗口的触发按钮上的data-modal
由于指定该按钮用于触发哪个模态窗口,这是一个唯一的ID标识符。
模态窗口的关闭按钮使用的是SVG,它的颜色在CSS中控制。
CSS样式
模态窗口中的内容使用Flex来布局。变为动画添加了特殊贝兹曲线的CSS过渡效果。
.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
,靠实际的内容来填充模态窗口。
.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
属性可以知道是哪个模态窗口被触发了。同时,插件会在按钮上方出入一个占位<div>
,并计算出它移动扩大到屏幕中间所需要的值。当模态窗口动画结束的时候,模态窗口会被添加一个active
class,使模态窗口和按钮和占位<div>
具有相同的背景颜色,看起来就像是按钮被放大了一样。但实际上这里是三个不同的元素。
创建占位<div>
的代码如下:
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); } };
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!