Jonathan Smith


Modal Dialog Boxes

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Static example

A rendered modal with header, body, and set of actions in the footer.

							<div class="modal">
							<div class="modal-dialog">
							<div class="modal-content">
							<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
							<h2 class="modal-title">Modal title</h2>
							<div class="modal-body">
							<p>One fine body…</p>
							<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
							<button type="button" class="btn btn-primary">Save changes</button>
							</div><!-- /.modal-content -->
							</div><!-- /.modal-dialog -->
							</div><!-- /.modal -->

Live demo

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

Launch demo modal
  • Alerts Get notified on new alerts
  • Notifications Get notified on new notifications
  • Messages Get notified on new messages
  • Warnings Get notified on new warnings
  • Snap to increments
    Amount ($100 increments):
  • Range
    Price range:
  • Maximum
    Maximum Value:
  • Minimum
    Minimum Value: