nCom.js is a small, flexible, and featured JavaScript dialog using jQuery. Written in TypeScript and compiled in es2015. You can add it to any web project like Angular Front-End Framework. Fully compatible with FontAwesome icons.

Features:

• Supports any premium fonts such as Font Awesome.
• Custom action buttons.
• Supports HTML content, not just plain text.
• Countdown buttons.
• Automatic displays the dialog when the page is loaded or not.
• Useful events and methods.

How to make use of it:

1. Download the package and import the following files into the document.

<link rel="stylesheet" href="/path/to/ncom.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/ncom.js"></script>

2. Create a new ncom instance and add your icon, address, and message to the dialog.

var myDialog = new ncom({
    icon: "Any Icon Class Here",
    title: "Dialog Title Here",
    content: "Any html content here",
});

3. Create custom buttons within the dialog.

var myDialog = new ncom({
    icon: "Any Icon Class Here",
    title: "Dialog Title Here",
    content: "Any html content here",
    buttons:{
      ok:{
        class:"as-button btn-accept",
        text:'<i class="fa fa-check-circle"></i>&nbsp;Confirm',
        action:function($ok){alert("clicked")}
      },
      cancel:{
        hide:false,
        class:"as-effect-button btn-cancel",
        text:'<i class="fa fa-times"></i>&nbsp;Refuse',
        action:function($cancel){alert("refused")}
      }
    },
});

4. Add a countdown timer to one of the buttons.

var myDialog = new ncom({
    icon: "Any Icon Class Here",
    title: "Dialog Title Here",
    content: "Any html content here",
    buttons:{
      ok:{
        class:"as-button btn-accept",
        text:'<i class="fa fa-check-circle"></i>&nbsp;Confirm',
        action:function($ok){alert("clicked")}
      },
      cancel:{
        hide:false,
        class:"as-effect-button btn-cancel",
        text:'<i class="fa fa-times"></i>&nbsp;Refuse',
        action:function($cancel){alert("refused")}
      }
    },
    timer:"ok|30000",
});

5. Decide if you want to show the close button inside the dialog.

var myDialog = new ncom({
    icon: "Any Icon Class Here",
    title: "Dialog Title Here",
    content: "Any html content here",
    closeIcon: true,
});

6. Specify whether this dialog opens automatically when the page is loaded or must be opened manually via the launcher element.

var myDialog = new ncom({
    icon: "Any Icon Class Here",
    title: "Dialog Title Here",
    content: "Any html content here",
    ctrlOpen: false, // open on page load
});

7. Callback functions.

var myDialog = new ncom({
    onContentReady: function() {console.log(1)},
    onOpenBefore: function() {console.log(2)},
    onOpen: function() {console.log(3)},
    onAction: function() {console.log(4)},
    onClose: function() {console.log(5)},
    onDestroy: function() {console.log(6)},
});

8. API methods.

// open the dialog box
myDialog.open();

// close the dialog box
myDialog.close();

// destroy the dialog instance
myDialog.destroy();

// check if the dialog box is opened
myDialog.isOpen();

Responsive And Innovative Dialog Box Plugin, ncom Github

See Demo And Download

Official Website(lbgm): Click Here

This superior jQuery/javascript plugin is developed by lbgm. For extra Advanced usage, please go to the official website.