Simple Customizable Modal Dialog Plugin with jQuery - Unmodal
File Size: | 221 KB |
---|---|
Views Total: | 1045 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Unmodal is a simple, unobtrusive jQuery modal plugin used to create fully customizable modal windows and dialog boxes for web applications.
Features:
- Lightweight and simple to use.
- A great alternative to default alert, confirm, prompt boxes.
- Custom header, footer and buttons.
- Supports plain text, html and ajax content.
How to use it:
1. Add jQuery library together with the jQuery unmodal plugin's stylesheet and JavaScript to your webpages.
<link rel="stylesheet" href="unmodal.css"> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="unmodal.js"></script>
2. Create a basic modal dialog with custom title and content.
$.unmodal({ title: 'Title', sContent: 'Content' });
3. Create a modal dialog with custom buttons.
$.unmodal({ title: 'Title', btnOkText: 'Ok Button', btnCancelText: 'Cancel Button' });
4. Create a 'fixed' modal dialog that will stay in the middle of your screen.
$.unmodal({ title: 'Title', sContent: 'fixed: true', fixed: true });
5. Configuration options and defaults.
$.unmodal({ // modal title title: 'Unmodal', // modal body sContent: 'JQuery modal plugin', // text for OK button btnOkText: 'Ok', // text for Cancel button btnCancelText: 'Cancel', // enable fixed mode fixed: false, // custom animation animation: '', // ESC to close the modal esc: true, // callbacks onShown: null, onClosed: null, // shows background overlay backdrop: true, // background content sBackdrop: null, // shows modal header header: true, // header content sHeader: null, // shows modal footer footer: true, // footer content sFooter: null });
This awesome jQuery plugin is developed by wangchi. For more Advanced Usages, please check the demo page or visit the official website.