jQuery Plugin For Manipulating Bootstrap Modals - pModal
File Size: | 4.16 KB |
---|---|
Views Total: | 724 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
pModal is a lightweight jQuery plugin used to generate, manipulate and customize the native Bootstrap modal component.
How to use it:
1. Include the jQuery pModal plugin on your project which has jQuery library and Bootstrap framework installed.
<link rel="stylesheet" href="/path/to/bootstrap.min.css"> ... <script src="/path/to/jquery-1.11.3.min.js"></script> <script src="/path/to/bootstrap.min.js"></script> <script src="/path/to/pmodal.bootstrap.js"></script>
2. Create a link to toggle the Bootstrap modal.
<a href="#" class="demo-1">Click me!</a>
3. Initialize the plugin to display a default confirm dialog using Bootstrap modal component.
$('.demo-1').pModal();
4. Customize the plugin.
$('.demo-1').pModal({ // modal title title: 'Attention!', // modal content content: 'Are you sure?', // confirm text confirm: 'Yes', // decline text decline: 'No', // CSS style of the confirm button confirmType: 'success', // CSS style of the decline button declineType: 'danger', // fired after clicking on confirm button confirmCallback: defaultCallback, // show on document ready showOnStartup: false, // remove modal from DOM on close killOnClose: false, // specify where modal markup should be applied appendTo: 'body', // additional CSS class customClass: '', // Accepts both percentage and fixed values width: false });
This awesome jQuery plugin is developed by DevSeqe. For more Advanced Usages, please check the demo page or visit the official website.