Bootstrap Modal Basic

A bare minimum implementation of the Twitter Bootstrap Modal plugin.

by mmfansler

HTML

<script src="http://current.bootstrapcdn.com/bootstrap-v204/js/bootstrap.js"></script>
<link rel="stylesheet" href="//current.bootstrapcdn.com/bootstrap-v204/css/bootstrap-combined.min.css">
<a class="btn" data-toggle="modal" href="#redModal" >Launch Red</a>
<a class="btn" data-toggle="modal" href="#greenModal" >Launch Green</a>
<a class="btn" data-toggle="modal" href="#blueModal" >Launch Blue</a>

<div class="modal hide fade" id="greenModal" data-color="green">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

<div class="modal hide fade" id="redModal" data-color="red">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

<div class="modal hide fade" id="blueModal" data-color="blue">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

CSS

.modal-color-red .modal-backdrop {
      background-color: #f00;
    }
    .modal-color-green .modal-backdrop {
      background-color: #0f0;
    }
    .modal-color-blue .modal-backdrop {
      background-color: #00f;
    }

JavaScript

$('.modal[data-color]').on('show hidden', function(e) {
  $('body')
    .toggleClass('modal-color-' + $(this).data('color'));
});