🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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

Modal Bootstrap

Documentation

#Bootstrap extra modal Demo

A wrapper to the Bootstrap 3 modal Javascript we developed at HOKO. It uses the HTML already on the page (the modal 'container' and adds remote HTML to it).

Dependencies

Installation

Via npm

npm install bootstrap-extra-modal

Manually

Download the project and include the sources inside your head tag. Make sure you include the files after including jQuery and Bootstrap 3 sources

<!-- jQuery src --> <!-- Bootstrap 3 src -->  <link rel="stylesheet" type="text/css" href="your/folder/bootstrap-extra-modal.css"> <script src="your/folder/bootstrap-extra-modal.min.js" type="text/javascript"></script>

How to use:

Via data attributes

<button data-em-selector="#fancyModal" data-em-position="left" data-em-push-content="true">Ignite!</button>

Via JavaScript

$('#fancyModal').bootstrapExtraModal(options).show();

Options

Name Type Default Description
position string 'default' Position of the modal (can be 'default', 'right', 'left')
pushContent boolean false Option used to move the boby depending on 'position'
openAnimation string 'jelly' This will add a css class containing an animation
closeAnimation string 'unjelly' This will add a css class containing an animation
reload boolean false Reload page when closing the modal
css string '' Custom css class to be added to the modal container

Run:

npm install

Then:

grunt watch

Contributing

Pull Requests are always welcome!


You May Also Like