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

jquery-awesomodals是一款jQuery和CSS3超酷3D翻转式模态对话框插件。该对话框特效通过jquery和CSS3 transitions和transforms来在对话框打开时制作3D翻转的效果，效果非常的酷。

安装

可以通过bower来安装jquery-awesomodals插件。

$ bower install jquery-awesomodals                  
                

使用方法

使用jquery-awesomodals插件需要在页面中引入jquery和jquery-awesomodals.min.js文件。

<script src="js/jquery.min.js"></script>
<script src="dist/jquery-awesomodals.min.js"></script>                  
                

HTML结构

该对话框的HTML结构如下：

<div class="dialogs">
  <div class="dialog" id="modal-demo">
    <div class="dialog__content">
      <header class="dialog__header">
        <h1 class="dialog__title">Welcome</h1>
      </header>
      <div class="dialog__body">
        ......
      </div>
      <footer class="dialog__footer">
        <button class="btn" data-modal-close>Close</button>
      </footer>
    </div>
  </div>
  <div class="dialog-overlay"></div>
</div>
                

然后可以通过一个按钮来触发对话框。

<button class="btn" data-modal="#modal-demo" data-modal-init>打开对话框</button>                  
                

CSS样式

对话框的基本CSS样式如下：

.dialog {
  max-width: 480px;
  position: fixed;
  left: 50%;
  top: 2em;
  transform: translateX(-50%);
  z-index: 2000;
  visibility: hidden;
  backface-visibility: hidden;
  perspective: 1300px;
}

.dialog--active { visibility: visible; }

.dialog--active .dialog__content {
  opacity: 1;
  transform: rotateY(0)
}

.dialog--active ~ .dialog-overlay {
  opacity: 1;
  visibility: visible
}

.dialog__content {
  border-radius: 3px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  transition: .5s ease-in-out;
  opacity: 0;
  transform-style: preserve-3d;
  transform: rotateY(-70deg)
}

.dialog__header {
  background: #cb4a70;
  color: #fff
}

.dialog__title {
  margin: 0;
  text-align: center;
  font-weight: 200;
  line-height: 2em
}

.dialog__body { padding: 2em }

.dialog__footer {
  margin: 0 2em;
  padding: 2em 0;
  text-align: right;
  border-top: 1px solid rgba(0,0,0,0.1);
}

.dialog__footer .btn { font-size: 1.5em }

.dialog-overlay {
  content: "";
  position: fixed;
  visibility: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  opacity: 0;
  background: rgba(0,0,0,0.5);
  transition: all .6s
}               
                

初始化插件

在页面DOM元素加载完毕之后，可以通过awesomodals()方法来初始化该对话框插件。

$('.container').awesomodals();                  
                

配置参数

jquery-awesomodals模态对话框插件的github地址为：https://github.com/EmmanuelBeziat/jquery-awesomodals