对话框/Tips
超酷3D翻转式模态对话框插件
PetitQ
jquery-awesomodals 是一款 jQuery 和 CSS3 超酷 3D 翻转式模态对话框插件。该对话框特效通过 jquery 和 CSS3 transitions 和 transforms 来来对话框打开时制作 3D 翻转的效果，效果非常的酷。
使用方法：
使用 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
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
