Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

logo

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

License

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

About

Simple and easy javascript modal library with no dependency.

Resources

License

Releases

No releases published

Packages

No packages published