Remodal—漂亮的jquery模态响应弹出遮罩层

平坦,响应迅速、轻量级、快速、方便可自定义模态窗口插件与声明性符号和散列跟踪状态。
添加头部文件
<link rel="stylesheet" href="path/to/your/jquery.remodal.css">
<script src="path/to/your/jquery.remodal.min.js"></script>
为模态定义背景容器(模糊)等的影响。它可以是任何简单的内容包装:
<div class="remodal-bg">
...All your content...
</div>
现在创建一个模态对话框:
<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>
所以,现在你可以称之为一个散列:
<a href="#modal">Call the modal with data-remodal-id="modal"</a>
你可以通过附加选项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>
打开一个模态没有一个散列,使用data-remodal-target属性。
<a data-remodal-target="modal" href="#modal">Call the modal with data-remodal-id="modal"</a>
事件
 
(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);
});
很酷的兄弟!但我不喜欢声明性样式!
<script>
    var options = {...};
    $('[data-remodal-id=modal]').remodal(options);
</script>
不要使用id属性,如果你不想让浏览器滚动锚点。