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"); } }