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

A very smalll jQuery plugin that makes it easier to create dynamic Bootstrap modal windows directly in the JavaScript.

Modal Bootstrap

Documentation

Bootstrap Modal Manager

A jquery plugin which allows you to create bootstrap modals dynamically.

How to use

You'll need to include jQuery (required by bootstrap) and bootstrap itself and the manager.

<script type="text/javascript" src="path/jquery.js"></script> <script type="text/javascript" src="path/bootstrap.js"></script> <script type="text/javascript" src="build/bootstrapModalManager.js"></script>

You can then trigger a modal whenever required.

$('body').bootstrapModalManager();

You can set the text and buttons on the modal by passing the options object to the manager when triggering.

$('body').bootstrapModalManager({     head: {         text: 'Header text'     },     body: {         text: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>'     },     footer: {         buttons: [             {                 classes: ['btn-default'],                 text: 'Close',                 action: function () {                     alert("Button One");                 }             },             {                 classes: ['btn-primary'],                 text: 'Save Changes',                 action: function () {                     alert("Button Two");                 }             }         ]     } });

Options

The manager accepts a single object of options being passed.

Head

The head object accepts one text property which sets the text on the modal-header section.

head: {    text: 'Header text' },

Body

The body object accepts one text property which sets the text on the modal-body section.

body: {     text: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>' },

Footer

The footer object accepts an array which defines the buttons to be dispalyed in the modal-footer section.

footer: {     buttons: [] }

The button object requries a classes array, which allows you to add classes to the button, a text string which to set button text and an action function which is called on click of the button.

{     classes: ['btn-default'],     text: 'Close',     action: function () {         alert("Button One");     } }

You May Also Like