Modals

Example

Code

HTML

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <a href="#" id="privacyClose" class="close cfaicon-x" data-dismiss="modal"></a>
                <h5 class="modal-title alt">Privacy Settings</h5>
            </div>
            <div class="modal-body">
                <p><strong>Functional cookies</strong>, which are necessary for basic site functionality like keeping you logged in, are <strong>always enabled</strong>.</p>
                <form>
                    <p>
                        <label for="personalization" class="indent-label">
                            <input id="personalization" class="indent-checkbox" type="checkbox" />
                            <strong>Allow personalization cookies.</strong> These cookies help us provide content tailored to you.
                        </label>
                    </p>
                    <p>
                        <label for="analytics" class="indent-label">
                            <input id="analytics" class="indent-checkbox" type="checkbox" />
                            <strong>Allow analytics tracking.</strong> Analytics help us understand how the site is used, and which pages are the most popular. Read the <a href="#">Privacy Policy</a> to learn how this information is used.
                        </label>
                    </p>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="privacySave" data-dismiss="modal">Save Settings</button>
            </div>
        </div>
    </div>
</div>
                

Documentation

Problem Being Solved

The user must act or react to information at that moment without navigating away from their original task.

When To Use

They should only be used for critical interactions, or to prevent irreversible errors.

When Not To use

Because modals demand attention and interrupt workflow, they should not be used if other solutions are available.

Formatting

Modals use default bootstrap html and js