Modal

Pattern Library modals utilize Bootstrap 4’s modal JavaScript and HTML markup. It is not necessary to import Bootstrap 4’s CSS as Pattern Library’s CSS includes all of the styles necessary. Additional styles and features are built into Pattern Library’s version including the fixed header and footer.

Pattern Library modals have been designed with a fixed-position header and footer. They will always be visible on the screen no matter the length of the modal body. The modal is also designed to be vertically centred to the screen and will grow in height based on its content. If the content grows longer than the screen height, the modal body will become scrollable.

The modal can be closed by clicking on the close button, pressing the Esc key, or clicking on the modal backdrop.

See Bootstrap 4’s modal page for more information about the JS usage.

Note for IE11: The modal is built using the CSS3 flexbox model. By using the flexbox model, the header and footer are able to remain fixed and always visible on the screen without the need for hard-coded height values in CSS. Additionally, the overall height of the modal grows to 100% of the screen height based on the amount of content in the modal. If the content is long, the modal body will become scrollable. IE11 does not support the content growing and as a workaround, the height of the modal will always be 100% of the screen, even if there is not enough content to fill it. Edge, Chrome, Firefox, and Safari all support the modal growing feature.

Demo

Code


<!-- Button element used to open the modal. Ensure the `data-target` attribute points to the id of the modal. -->
<button class="cui btn-md utility-btn" data-toggle="modal"
data-target="#{{ Modal id (e.g. #unique-modal-id) }}">
    {{ Button text }}
</button>

<!-- The modal. Hidden by default, until the modal is activated by the button by JS.
Ideally should be placed at a top-level position in the HTML to avoid potential
interferance with other elements. -->
<div id="{{ Modal id (e.g. unique-modal-id) }}" class="cui modal"
tabindex="-1" role="dialog" aria-labelledby="{{ Modal title id (e.g. unique-title-id) }}"
aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="{{ Modal title id (e.g. unique-title-id) }}" class="modal-title">
                    {{ Modal title }}
                </h2>
                <button type="button" class="btn-modal-close cui btn-md primary-text" data-dismiss="modal">
                    Close
                </button>
            </div>
            <div class="modal-body">
                {{ Modal body }}
            </div>
            <div class="modal-footer">
                {{ Modal footer }}
            </div>
        </div>
    </div>
</div>

Example footer usage

The modal footer is a great place to put confirmation buttons.

Code


<div id="{{ Modal id (e.g. unique-modal-id) }}" class="cui modal"
tabindex="-1" role="dialog" aria-labelledby="{{ Modal title id (e.g. unique-title-id) }}"
aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            ...
            <div class="modal-footer">
                <button class="cui btn-md primary float-left">Confirm</button>
                <button class="cui btn-md primary-text float-right">Cancel</button>
            </div>
        </div>
    </div>
</div>

Optional static backdrop

By default, when the modal backdrop element (the dark grey overlay behind the modal window) is clicked, the modal will close. There are some cases where this functionality should be disabled. For example, the backdrop should not be clickable when the modal is used as a confirmation dialog box where the user must explicitly click an option in the modal to proceed.

Add data-backdrop="static" to the .modal element.

Code


<div id="{{ Modal id (e.g. unique-modal-id) }}" class="cui modal"
tabindex="-1" role="dialog" aria-labelledby="{{ Modal title id (e.g. unique-title-id) }}
aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            ...
        </div>
    </div>
</div>

Optional sizes

Modals can be small, medium, or large. The medium size is applied by default.

To use the small or large variants, apply the modifier classes modal-sm or modal-lg to the .modal-dialog element. These sizes will kick in at certain breakpoints.

Code


<div id="{{ Modal id (e.g. unique-modal-id) }}" class="cui modal"
tabindex="-1" role="dialog" aria-labelledby="{{ Modal title id (e.g. unique-title-id) }}"
aria-hidden="true">
    <div class="modal-dialog {{ modal-sm | modal-lg }}" role="document">
        <div class="modal-content">
            ...
        </div>
    </div>
</div>

Optional fullscreen size for mobile

Because clicking on the modal backdrop will automatically close the modal, this can cause a usability issue for mobile users. The user may accidentally close the modal if their finger touches the backdrop while scrolling the content.

One way to resolve this problem is to change the modal to full screen to hide the backdrop. Apply the optional modifier class modal-fs-mobile to the .modal-dialog element. The full screen style will kick in for mobile-sized devices and go back to normal for larger screens.

Resize your window to a mobile size and compare the two examples below:

Code


<!-- Modal will display in full screen for mobile devices with the
`modal-fs-mobile` class applied to the `modal-dialog` element -->
<div id="{{ Modal id (e.g. unique-modal-id) }}" class="cui modal"
tabindex="-1" role="dialog" aria-labelledby="{{ Modal title id (e.g. unique-title-id) }}"
aria-hidden="true">
    <div class="modal-dialog modal-fs-mobile" role="document">
        <div class="modal-content">
            ...
        </div>
    </div>
</div>