remodal

2018-06-13 admin

remodal是什么

什么是remodal,Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.

remodal介绍、remodal使用

<link rel=“stylesheet” href="…/dist/remodal-default-theme.css">


Include the JS file from the dist folder before the `</body>`:

```text-html-basic
<script src="../dist/remodal.min.js"></script>

You can define the background container for the modal(for effects like a blur). It can be any simple content wrapper:

<div class="remodal-bg">
...Page content...
</div>

And now create the modal dialog:

<div class="remodal" data-remodal-id="modal">
  <button data-remodal-action="close" class="remodal-close"></button>
  <h1>Remodal</h1>
  <p>
    Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
  </p>
  <br>
  <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
  <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

Don’t use the id attribute, if you want to avoid the anchor jump, use data-remodal-id.

So, now you can call it with the hash:

<a href="#modal">Call the modal with data-remodal-id="modal"</a>

Or:

<a data-remodal-target="modal">Call the modal with data-remodal-id="modal"</a>

Options

You can pass additional options with the data-remodal-options attribute.

<div class="remodal" data-remodal-id="modal"
  data-remodal-options="hashTracking: false, closeOnOutsideClick: false">

  <button data-remodal-action="close" class="remodal-close"></button>
  <h1>Remodal</h1>
  <p>
    Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
  </p>
  <br>
  <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
  <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

hashTracking

Default: true

To open the modal without the hash, use the data-remodal-target attribute.

<a data-remodal-target="modal" href="#">Call the modal with data-remodal-id="modal"</a>

closeOnConfirm

Default: true

If true, closes the modal window after clicking the confirm button.

closeOnCancel

Default: true

If true, closes the modal window after clicking the cancel button.

closeOnEscape

Default: true

If true, closes the modal window after pressing the ESC key.

closeOnOutsideClick

Default: true

If true, closes the modal window by clicking anywhere on the page.

modifier

Default: ''

Modifier CSS classes for the modal that is added to the overlay, modal, background and wrapper (see CSS).

appendTo

Default: document.body

Globals

<script>
window.REMODAL_GLOBALS = {
  NAMESPACE: 'modal',
  DEFAULTS: {
    hashTracking: false
  }
};
</script>
<script src="../dist/remodal.js"></script>

NAMESPACE

Base HTML class for your modals. CSS theme should be updated to reflect this.

DEFAULTS

Extends the default settings.

Initialization with JavaScript

Do not set the ‘remodal’ class, if you prefer a JS initialization.

<div data-remodal-id="modal">
  <button data-remodal-action="close" class="remodal-close"></button>
  <h1>Remodal</h1>
  <p>
    Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
  </p>
</div>
<script>
    var options = {...};

    $('[data-remodal-id=modal]').remodal(options);

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-33985.html

文章标题:remodal

回到顶部