6-24 4,466 views
1.平坦,响应迅速、轻量级、快速、方便可自定义模态窗口插件与声明性符号和散列跟踪状态。
添加头部文件
添加头部文件
<link rel="stylesheet" href="path/to/your/jquery.remodal.css">
<script src="path/to/your/jquery.remodal.min.js"></script>
2.为模态定义背景容器(模糊)等的影响。它可以是任何简单的内容包装:
<div class="remodal-bg">
...All your content...
</div>
3.现在创建一个模态对话框:
<div class="remodal" data-remodal-id="modal">
<h1>Remodal</h1>
<p>
Flat, responsive, lightweight, fast, easy customizable modal window plugin
with declarative state notation and hash tracking.
</p>
<br>
<a class="remodal-cancel" href="#">Cancel</a>
<a class="remodal-confirm" href="#">OK</a>
</div>
4.所以,现在你可以称之为一个散列:
<a href="#modal">Call the modal with data-remodal-id="modal"</a>
5.你可以通过附加选项data-remodal-options属性。必须有效的JSON数据
<div class="remodal" data-remodal-id="modal"
data-remodal-options='{ "hashTracking": false }'>
<h1>Remodal</h1>
<p>
Flat, responsive, lightweight, fast, easy customizable modal window plugin
with declarative state notation and hash tracking.
</p>
<br>
<a class="remodal-cancel" href="#">Cancel</a>
<a class="remodal-confirm" href="#">OK</a>
</div>
6.打开一个模态没有一个散列,使用data-remodal-target属性。
<a data-remodal-target="modal" href="#modal">Call the modal with data-remodal-id="modal"</a>
7.事件
(document).on('open', '.remodal', function () {
var modal = $(this);
});
$(document).on('opened', '.remodal', function () {
var modal = $(this);
});
$(document).on('close', '.remodal', function () {
var modal = $(this);
});
$(document).on('closed', '.remodal', function () {
var modal = $(this);
});
$(document).on('confirm', '.remodal', function () {
var modal = $(this);
});
$(document).on('cancel', '.remodal', function () {
var modal = $(this);
});
8.声明
<script>
var options = {...};
$('[data-remodal-id=modal]').remodal(options);
</script>