Description: The modal is the child window that requires a user interaction before returning to the parent application.
508 Guidelines: When a modal window is present, the focus must be placed on the modal window. When the modal window closes, the focus must be returned to the object that triggered the modal.
<button type="button" class="btn btn-default btn-md" data-toggle="modal" data-target="#myModal" title="Select the button to open up a modal window">View modal </button>
<div class="modal fade" id="myModal" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-backdrop">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-md-10 col-xs-10">
<h4 class="modal-title" id="myModalLabel">Title</h4>
</div>
<div class="col-md-2 col-xs-2">
<button type="button" class="close" data-dismiss="modal" title="To close the modal, select the close button."><span aria-hidden="true">×</span></button>
</div>
</div>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" title="To close the modal, select the close button.">Close</button>
</div>
</div>
</div>
</div>
Copy
<button type="button" class="btn btn-default btn-md" data-toggle="modal" data-target="#myLiquidModal" title="Select the button to open up a modal window">Launch Liquid modal</button>
<div class="modal fade" id="myLiquidModal" aria-labelledby="myLiquidModalLabel" aria-hidden="true">
<!--
liquid fills the screen by default. If you'd like to give a fixed width to the modal
you can use the helpers "modal-sm", "modal-md" and "modal-lg" alongside the "modal-liquid" class.
-->
<div class="modal-dialog modal-liquid">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-md-10 col-xs-10">
<h4 class="modal-title" id="myLiquidModalLabel">Modal Title</h4>
</div>
<div class="col-md-2 col-xs-2">
<button type="button" class="close" data-dismiss="modal" title="To close the modal, select the close button."><span aria-hidden="true">×</span></button>
</div>
</div>
</div>
<div class="modal-body">
<!-- your content goes here -->
<p>Your content goes here...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" title="To close the modal, select the close button.">Close</button>
</div>
</div>
</div>
</div>
Copy