Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tiny-dialogue) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Tiny wrapper over the <dialog />

Native, no overhead scripts, just dialog

Dialogue

GitHub Repo stars GitHub Release GitHub deployments GitHub Actions Workflow Status NPM Downloads

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() // enable simple mode (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>

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

tiny-dialogue