jQuery Plugin To Create Multiple Bootstrap Modals

Better Bootstrap Modals is a JQuery / CSS extension for Bootstrap that allows you to display multiple Bootstrap modal windows on the webpage. Better Bootstrap Modals also supports modals of different sizes, since it is deeply integrated with the core of Bootstrap.

How to use it:

1. Download and place the Better Bootstrap Modals plugin's JavaScript & CSS files into your Bootstrap project.

<link rel="stylesheet" href="hbootstrap.min.css">
<link href="bbm-0.3.3.css" rel="stylesheet">

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bbm-0.3.3.js"></script>

2. Create multiple modal windows on the webpage as follows:

<div class="modal" id="modal1" data-backdrop="false" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal 1</h4>
      </div>
      <div class="modal-body">
        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal2">Open another modal</button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal2" data-backdrop="false" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal 2</h4>
      </div>
      <div class="modal-body">
        This is modal 2
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

3. Create a trigger element to open the modal 1.

<a href="#" data-toggle="modal" data-target="#modal1">Click me</a>

Change log:

2016-11-06

• Bugfix v0.4.1

---

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