native-modal

Quick start

Installation

Package is available on npm and can be installed from the command line.

$ npm i native-modal

via CDN

You can also download or link to the latest compiled version using the CDN.

https://unpkg.com/native-modal/dist/native-modal.min.js

Usage

See simple usage with attribute based modals.

import { initNativeModal } from 'native-modal'

initNativeModal() // register attrs handling

<!-- pass `dialog` selector in attr -->
<button data-modal-open="dialog">Show modal</button>

... 

<dialog>
    <h2>NativeModal</h2>
    <p>Hello, click on OK to close modal.</p>
    <button data-modal-close>OK</button>
</dialog>

Appearance The original modal window doesn't have any styles, so you'll need to style the dialog box yourself or use ready-made themes, or even write your own theme.

Multiple modals

<button data-modal-open="#first">Open first</button>
<button data-modal-open="#second">Open second</button>

... 

<dialog id="first">
    <h2>First!</h2>
    <p>Hello, click on OK to close modal.</p>
    <button data-modal-close>OK</button>
</dialog>

<dialog id="second">
    <h2>I am second</h2>
    <p>Hello, click on OK to close modal.</p>
    <button data-modal-close>OK</button>
</dialog>

Pass props

You can modify the behavior of the modal window by passing parameters to the dialog box. It's very simple. Let's look at an examples:

---

Disable esc closing

By default, an open dialog box can be closed using esc. We can prevent this by passing the parameter disable-esc.

<button data-modal-open="dialog">Open modal</button>

... 

<dialog disable-esc>
    <h2>Hello</h2>
    <p>Pressing <code>esc</code> has no effect</p>
    <button data-modal-close>Good</button>
</dialog>

---

One time

You can set a props once so that the modal window is triggered only once.

<button data-modal-open="dialog">Open modal</button>

... 

<dialog once>
    <h2>Onetime</h2>
    <p>You'll only see me once, thank attribute <code>once</code>. </p>
    <button data-modal-close>Thx for once</button>
</dialog>

Take note Don't forget, this example will work only once, you will need to refresh the page to reopen the modal window example.

---

Another example

Add delay to opening modal via show-delay

<button data-modal-open="dialog">Open modal</button>

... 

<dialog disable-esc show-delay="2000">
    <h2>Hello</h2>
    <p>Also pressing <code>esc</code> has no effect</p>
    <button data-modal-close>Cool</button>
</dialog>

Programmatically

To control modal windows from a script, you can use the Modal class.

First, we need to define the modal structure of the DOM

<dialog id="modal">
    <h2>Modal</h2>
    <p>Hello, click on OK to close modal.</p>
    <button data-modal-close>OK</button>
</dialog>

Next, we need to create a Modal instance:

import { Modal } from 'native-modal'

const modal = new Modal('#modal')

modal.open() // Yeah, you open me!
modal.close() // easy to close!

Okay, how do I apply the parameters? Let's look at an example:

import { Modal } from 'native-modal'

const modal = new Modal('#modal', {
    animation: true, // enable open/close animation
    disableEsc: true, // prevent esc closing
})

modal.open() // Well done!

What's next?

You can easily customize the content of your modal window, this package gives you a simple wrapper to work with your modal window, its appearance is solely your responsibility.

• Explore demos page.
• See available props (options)
• Learn how to customize your modals (themes)