Multi-functional Ajax Enabled Bootstrap Modal Plugin - bootpop.js

bootpop.js is a jQuery plugin designed for enhancing the default Bootstrap modal component that supports AJAX loading, JSON content handler, alert/confirm dialogs and image/html embedding.

Basic usage:

1. Load the jquery.bootpop.js and jquery.bootpop.css into your Bootstrap project as follows:

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link href="/path/to/jquery.bootpop.css" rel="stylesheet">

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="dist/jquery.bootpop.js"></script>

2. Create a modal window that loads external data using AJAX request.

Bootpop('ajax.html', {
  // options here
});

3. Create an alert modal window.

Bootpop.alert('Some important message.', {
  // options here
});

4. Create a confirmation dialog.

Bootpop.ask('Are you sure?', {
  // options here
});

5. Embed an image into the modal window.

Bootpop.image('https://unsplash.it/600/450/?random', { 
  // options here
});

6. You're able to embed any html content into the modal window.

Bootpop.html('<h1>Hello</h1><h2>World</h2><h3>!</h3>');

7. Default options to customize your modal windows.

// modal title
title : null,

// small or large
size: null,

// post or get
method: 'post',

// paramaters
params : {},

// custom buttons
buttons : [],

// show modal header
modalHeader: true,

// CSS classes
modalClass: 'modal fade',
dialogClass: 'modal-dialog',
contentClass: 'modal-content',
headerClass: 'modal-header',
titleClass:  'modal-title',
bodyClass: 'modal-body',
footerClass: 'modal-footer',
imageClass : 'img-responsive',

// ajax handler
responseHandler : function(data){
    return data;    
}

---

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