Responsive And Innovative Dialog Box Plugin - jQuery nCom.js

nCom.js is a lightweight jQuery plugin for creating responsive and customizable dialog boxes.

You can use it as an alternative to the native popup boxes like alerts and confirmation dialogs.

Features:

• Supports any iconic fonts like Font Awesome.
• Custom action buttons.
• Supports HTML content, not only plain text.
• Countdown timer on buttons.
• Auto displays the dialog box on page load or not.
• Useful events and methods.

How to use 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 own icon, title, message to the dialog box.

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

3. Create custom buttons inside the dialog box.

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 (ok button in this example).

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. Determine whether to show a close button inside the dialog box.

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

6. Determine whether this dialog box is opened automatically on page load or must be opened manually via a trigger 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();

---

This awesome jQuery plugin is developed by lbgm. For more Advanced Usages, please check the demo page or visit the official website.