响应式Google Material Design风格js模态窗口插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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