Google Material Design 风格模态窗口插件

PetitQ 对话框/Tips 2018-10-26 1.79K 0 0

这是一款效果非常酷的 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 (fakediv === null) {
```

    var div = document.createElement('div');

```
    div.id = 'modal__temp';
```
```
    self.appendChild(div);
```
```
    moveTrig(self, modal, div);
```
```
  }
```
```
};
```

Google Material Design 风格模态窗口插件

已有 448 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

对话框/Tips

Google Material Design 风格模态窗口插件

制作方法：

HTML 结构：

CSS 样式：

JAVASCRIPT 代码：

Google Material Design 风格模态窗口插件

相关文章

HTML5/CSS3可嵌入任意HTML元素分步Tooltip提示框

超酷3D翻转式模态对话框插件

Tooltip 工具提示jQuery插件

发表回复取消回复

热销模板

对话框/Tips

制作方法：

HTML 结构：

CSS 样式：

JAVASCRIPT 代码：

Google Material Design 风格模态窗口插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复