Modal

Prev Next

A Modal is a dialog box that pops up on top of the page, dimming everything behind it with a backdrop. Bootstrap 3 builds it from a fixed set of nested classes and wires up open/close behavior with two data attributes — no custom JavaScript required for the basic case. We'll build a TrailMap "Confirm trail submission" modal end to end.

Modal Markup: The Nested Structure

Every modal follows the same skeleton: an outer .modal wrapper, a sizing/centering .modal-dialog, and a .modal-content box split into header, body, and footer.

Class	Role
`.modal`	The hidden-by-default outer wrapper; toggled by the plugin
`.modal-dialog`	Controls width and centers the dialog horizontally
`.modal-content`	The visible white box: border, shadow, rounded corners
`.modal-header`	Title area, usually with a close `×` button
`.modal-body`	Main content of the dialog
`.modal-footer`	Right-aligned action buttons

Triggering With data-toggle and data-target

Any element can open a modal declaratively: add data-toggle="modal" and point data-target at the modal's id using a CSS selector (#idValue). No JavaScript is needed to write for this to work — the plugin listens for the click itself.

<!-- TrailMap: trigger button -->
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#confirmTrailModal">Submit Trail</button>

<!-- TrailMap: "Confirm trail submission" modal -->
<div class="modal fade" id="confirmTrailModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Confirm Trail Submission</h4>
      </div>
      <div class="modal-body">
        <p>You're about to submit <strong>Ridge Overlook Loop</strong> for review. Continue?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-success">Confirm Submission</button>
      </div>
    </div>
  </div>
</div>

Closing works the same way: any element inside the modal with data-dismiss="modal" — the header's × button or a footer "Cancel" button — closes it, no extra code needed.

Sizing: .modal-lg and .modal-sm

Add a size class to .modal-dialog to widen or narrow the dialog from its default width.

<div class="modal-dialog modal-lg"> ... </div> <!-- wide -->
<div class="modal-dialog modal-sm"> ... </div> <!-- narrow -->

The jQuery Method: Triggering from Custom JS

When you need to open a modal from your own code — after an AJAX call succeeds, for example — skip the data attributes and call the .modal() jQuery method directly on the modal's selector:

$('#confirmTrailModal').modal('show');   // open it programmatically
$('#confirmTrailModal').modal('hide');   // close it programmatically
$('#confirmTrailModal').modal('toggle'); // flip current state

Up next: Dropdown covers the JS side of a component you already styled — plus how to trigger one manually with jQuery.

Prev Next