Simple and easy javascript modal library with no dependency. https://github.com/oigil/dndod
- Alert, Confirm, Notice action with modal popup.
- Customaziable options.
- No dependency.
- Supports capturing tab moves in modal.
- Supports closing modal with ESC key.
- TODO : WAI-ARIA
- Chrome
- Safari
- Firefox
- IE 10+
- Edge
- Opera
$ npm install dndodimport dndod from 'dndod'
import 'dndod/dist/dndod-popup.min.css'
dndod.alert('Alert')<head>
<link href="/node_modules/dndod/dist/dndod-popup.min.css" rel="stylesheet" type="text/css">
<script src="/node_modules/dndod/dist/dndod-popup.min.js"></script>
</head>
<body>
<script>
dndod.alert("Alert");
</script>
</body>dndod.alert("Message", options);
dndod.confirm("Message", function(popup) {
console.log("confirmed!");
}, options);
dndod.notice("Message", options);
dndod.popup({
//Check detail options below
});dndod.popup({
prefixClass: String, //Prefix of classname. (Default : "dndod")
title: String, //Title (Default : "")
msg: String | Element, //Message Text or DOM Element (Default : "")
textAlign: String, //Alignment of title and message. (Default : "center")
animation: String, //Animation types : "from-top", "from-bottom", "none" (Default : "from-top")
animationDuration: Number, // Animation Duration in ms (Default : 250)
disableCloseBtn: Boolean, // Do not generate close button on the top right corner. (Default : false)
disableOutline: Boolean, // Hide browser-based outline style. (Default : false)
enableHTML: Boolean, // Enable HTML codes in 'title' and 'msg'. (Default : false)
events: {
create: Function(popup), // Triggered after instance created.
mount: Function(popup), // Triggered after DOM element attached to document's body.
close: Function(popup), // Triggered after close method is called.
unmount: Function(popup) // Triggered after DOM element detached from document's body.
},
buttons: [ // ArrayList of buttons
{
text: String, //Button text
type: String, //Button style types : "default", "primary", "info", "success", "warning", "danger" (Default: "default")
handler: Function(event, popup) //Button click handler. Pass
},
...
]
})- Cavin Jo ([email protected])
This project is licensed under the MIT License - see the LICENSE.md file for details