jquery-awesomodals是一款jQueryCSS3超酷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();                  
                

配置参数

参数 默认值 可选值 描述
debug false 布尔值 是否允许显示调试信息
selectorOpen '[data-modal-init]' data-*属性 , class类或任何元素选择器
selectorClose '[data-modal-cose]' data-*属性 , class类或任何元素选择器
selectorModal '[data-modal-item]' data-*属性 , class类或任何元素选择器
itemOverlay '.dialog-overlay' 任何元素选择器
classActive 'dialog--active' 字符串 激活对话框的class类
optionOverlayActive true 布尔值 是否允许点击遮罩层关闭对话框
onModalOpened null 回调函数 对话框被打开时触发
onModalClosed null 回调函数 对话框被关闭时触发

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