这是一款效果非常酷的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); }}; |
