Modals

Modals are a blocking element, they should be used sparingly and only when we absolutely, positively have to stop the user in their tracks to perform a specific action.

Example:

<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">&times;</button>
                <h4 class="modal__title">A simple example</h4>
            </div>
            <div class="modal__body">
                <p>The modal body might have instructions, a form, or other stuff.</p>
            </div>
            <div class="modal__footer">
                <button type="button" class="btn" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn--primary">Save Changes</button>
            </div>
        </div><!-- /.modal__content -->
    </div><!-- /.modal__dialog -->
</div><!-- /.modal -->

See the Pen docs - modal - simple by Paul Stanton (@stanton) on CodePen.

Variations

Use the .modal--danger class for situations where we're performing destructive actions.

<div class="modal modal--danger">
    ...
</div>

See the Pen docs - modal - danger by Paul Stanton (@stanton) on CodePen.

Show modal

Toggle a modal with a link (or a link button) by using the data-toggle="modal" attribute. This method assumes the modal markup is present in the DOM.

<!-- Toggle link -->
<a data-toggle="modal" href="#myModal" class="btn">Launch Demo Modal</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    ...
</div>

Launch Demo Modal

Make modals accessible

Be sure to add role="dialog" to your primary modal div. In the example above, div#myModal. Also, the aria-labelledby attribute references your modal title. In this example, h4#myModalLabel. Finally, aria-hidden="true" tells assistive technologies to skip DOM elements. Additionally, you may give a description of your modal dialog. Use the aria-describedby attribute in the modal's primary <div> to point to this description (this is not shown in the above example).