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>

Result

Show modal

NativeModal

Hello, click on OK to close modal.

OK

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

Result

Open first Open second

First!

Hello, click on OK to close modal.

OK

I am second

Hello, click on OK to close modal.

OK

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>

Result

After opening, try pressing esc

Open modal

Hello

Pressing esc has no effect

Good

---

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>

Result

Open modal

One time

You'll only see me once, thank attribute once.

Okay

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

Result

Modal opened after 2000ms

Open modal

Hello

Also pressing esc has no effect

Cool

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)

Changelog

v0.0.4

compare changes

🏡 Chore

• Add readme file (fb22e99)

❤️ Contributors

• Azabroflovski [e-mail]