Simple Modal - Baseline Bootstrap

Basic modal template with default settings.

by Doug Hill

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<button id="ex-simple-modal-btn" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#ex-simple-modal">SIMPLE MODAL - DATA ATTRIBUTES METHOD ONLY</button>


<!--SECTION USED FOR MODAL CONTAINERS-->
<div id="ex-simple-modal" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">MODAL HEADER</h4>
        </div>
        <div class="modal-body">
          <p class="lead">MODAL BODY</p>
          <p></p>
        </div>
        <div class="modal-footer">
          <div class="pull-left">MODAL FOOTER</div>
          <div class="pull-right">
            <button type="button" class="btn btn-default" data-dismiss="modal">CLOSE</button>
            <button type="button" class="btn btn-primary">SAVE</button>
          </div>
        </div><!--end: MODAL FOOTER-->
      </div><!-- end: MODAL CONTENT -->
    </div><!-- end: MODAL DIALOG -->
  </div><!-- end: MODAL -->

CSS

#ex-simple-modal-btn {
    position: absolute;
    top: 200px;
    left: 200px;
}

JavaScript

// NO JS REQUIRED