Quick start

NOTE

The package is under active development, in this regard, there may be significant api changes.

Installation

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

$ npm i tiny-dialogue

via CDN

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

https://unpkg.com/tiny-dialogue/dist/tiny-dialogue.min.js

Usage

See simple usage with attribute based modals.

import { initSimpleMode } from 'tiny-dialogue'

initSimpleMode() // register attrs handling

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

... 

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

Result

Dialogue

Hello, click on OK to close modal.

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

First!

Hello, click on OK to close modal.

I am second

Hello, click on OK to close modal.

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

Hello

Pressing esc has no effect

---

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

One time

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

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

Hello

Also pressing esc has no effect

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 { Dialogue } from 'tiny-dialogue'

const modal = new Dialogue('#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 { Dialogue } from 'tiny-dialogue'

const modal = new Dialogue('#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)