当前位置：首页 > 网页特效 > 弹出层

响应式Google Material Design风格js模态窗口插件

分类：弹出层日期：2024-05-14 点击(5) 评论(0)

简介

该模态窗口使用CSS3来驱动动画效果，整个效果的关键也在于这些动画，它给了这个模态窗口Material Design的视觉效果。

#####  HTML结构
在这个效果中，点击按钮后放大的元素不是按钮本身或模态窗口，它实际上是一个动态添加的div。这个div被创建时大小和按钮尺寸相等，并使用js代码来扩大它。当实际的模态窗口变为可见状态时，在动态的移除这个div。基本的模态窗口的HTML结构如下：

```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><path d="M0 0h24v24h-24z" fill="none"></path></svg>
      </a>
    </div>
  </div>
</div>    
```            
模态窗口的触发按钮上的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属性可以知道是哪个模态窗口被触发了。同时，插件会在按钮上方出入一个占位<div>，并计算出它移动扩大到屏幕中间所需要的值。当模态窗口动画结束的时候，模态窗口会被添加一个active class，使模态窗口和按钮和占位<div>具有相同的背景颜色，看起来就像是按钮被放大了一样。但实际上这里是三个不同的元素。

创建占位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);
  }
};    
```

web299.com

响应式Google Material Design风格js模态窗口插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果