New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

dndod

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

dndod

Simple and easy javascript modal library with no dependency.

  • 1.0.5
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

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

Keywords

FAQs

Package last updated on 03 Apr 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc