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.
<!-- here goes the content of your 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 -->Open dialog
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 -->X
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 = documentdialog // open the dialog // 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.
and, if you have a lot of dialogs, and want disable all, just define in javascript, using the method .clickOutside()
, e.g.
MnCode // disable