mn-dialog

Minimalist dialog component, agnostic to framworks.

See the demo

Install

npm install --save mn-dialog

And bundle dependencies and main files in dist/ with your preferred tool.

Usage

Add to your html, the tag mn-dialog and assign to it an id, e.g.

<mn-dialog id="example">
  <!-- here goes the content of your dialog -->
</mn-dialog>

and to open this dialog, you can add to any element (we suggest a button), the attibute open-dialog with id as value, e.g.

<!-- when click in the button, dialog will be opened -->
<button open-dialog="example">Open dialog</button>

finally, to close the button, user can click outside of dialog, or press the key esc, but if you can add to another element, use the attribute close-dialog, e.g.

<!-- id of dialog dont be required -->
<button close-dialog>X</button>

Javascript

If you want to use javascript to open or close a mn-dialog, just use these methods, available directly on element, e.g.

const dialog = document.querySelector('mn-dialog#example')
dialog.open() // open the dialog

setTimeout(() => {
  dialog.close() // close the dialog
}, 2000) // after 2 seconds :D

disable click outside

In desktop, maybe you want disable click outside closing, you can do this, adding a class .disable-click-outside, e.g.

<mn-dialog id="example" class="disable-click-outside"></mn-dialog>

and, if you have a lot of dialogs, and want disable all, just define in javascript, using the method .clickOutside(), e.g.

MnCode.clickOutside(false) // disable