jQuery Plugin For Extending Bootstrap 3 Modal Component

A jQuery extension for Bootstrap 3 framework that allows you to create highly customizable animated modals and AJAX modals using Bootstrap modal component.

How to use it:

1. Include the jQuery Bootstrap Extra Modal's stylesheet and JavaScript files on your Bootstrap project.

<link rel="stylesheet" href="bootstrap-extra-modal.css">
<script src="bootstrap-extra-modal.min.js"></script>

2. Create a Bootstrap modal window following the markup structure like this:

<div class="modal fade" id="ajaxModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>Modal Content</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

3. Create a button to toggle the modal window that slides out from the left of the browser window. In this case we're going to pass the options to the modal window via HTML5 data attributes.

<button class="btn btn-primary js-open-modal-left" 
        data-em-selector="#demo" 
        data-em-position="left" 
        data-em-push-content="true" 
        data-em-css="custom-class" 
        data-em-keyboard="false" 
        data-em-backdrop="static">
        Open Left Modal
</button>

4. Enable the plugin.

$('.js-open-modal').click(function() {
  $('#demo').bootstrapExtraModal().show();
});

5. You can also pass the options via JavaScript. Here's a list of all options with default values.

// [BS setting] boolean or the string 'static'
backdrop:         'static', 

// [BS setting] if true - closes the modal when escape key is pressed
keyboard:         false, 

// reload page when closing the modal
reload:           false, 

// position of the modal (can be 'default', 'right', 'left')
position:         'default', 

// custom css class to be added to the modal container
css:              '', 

// default open animation
openAnimation:    'jelly', 

// default close animation
closeAnimation:   'unjelly', 

// Option used to move the boby
pushContent:      false, 

Change log:

2015-12-16

• JS update

---

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