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

github地址:https://github.com/VodkaBears/Remodal/

<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>

<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>

<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>