Responsive And Innovative Dialog Box Plugin - jQuery nCom.js
File Size: | 44 KB |
---|---|
Views Total: | 605 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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> Confirm', action:function($ok){alert("clicked")} }, cancel:{ hide:false, class:"as-effect-button btn-cancel", text:'<i class="fa fa-times"></i> 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> Confirm', action:function($ok){alert("clicked")} }, cancel:{ hide:false, class:"as-effect-button btn-cancel", text:'<i class="fa fa-times"></i> 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.