Package Exports

dndod

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 (dndod) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

dndod

license GitHub package version npm

Simple and easy javascript modal library with no dependency. https://github.com/oigil/dndod

Demo page

clip

Features

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

Browser Support

Chrome
Safari
Firefox
IE 10+
Edge
Opera

Getting Started

npm

$ npm install dndod

Usage

ES6

import dndod from 'dndod'
import 'dndod/dist/dndod-popup.min.css'
    
dndod.alert('Alert')

Browser

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

Methods

dndod.alert(String, Object)

dndod.alert("Message", options);

alert

dndod.confirm(String, Function(), Object)

dndod.confirm("Message", function(popup) {
    console.log("confirmed!");
}, options);

confirm

dndod.notice(String, Object)

dndod.notice("Message", options);

notice

dndod.popup(Object)

dndod.popup({
    //Check detail options below 
});

Options

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
        },
        ...
    ]
})

Built With

Authors

Cavin Jo (oigil.jo@gmail.com)

License

This project is licensed under the MIT License - see the LICENSE.md file for details