jQuery Plugin For Manipulating Bootstrap Modals - pModal

File Size: 4.16 KB
Views Total: 670
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Manipulating Bootstrap Modals - pModal

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.