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">
	<span class="btn-wrapper"><span class="btn-text">Call to action</span><span class="cicon-angle-right right" aria-hidden="true"></span>
	</span>
</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


<!-- For a static backdrop, add `data-backdrop="static"` to the `.modal` 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" 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


<!-- Add the class `modal-sm` or `modal-lg` to the `.modal-dialog` element to customize the modal size. -->
<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 modal with open animation from card

This variant makes a card's content slide up and then the modal slide up and opens up a large modal with fullscreen on mobile drvices.

This variant is useful in situations where you really want to drive the content and show the client that they are directing to a model and not a new screen, which the user would need to interact with before proceeding to the next step.

Apply the optional modifier classes modal-lg and modal-fs-mobile to the .modal-dialog element. The fullscreen style will be in effect for all screen sizes including mobile, tablet, and desktop.

Apple the optional modifier class article-btn to the a or btn elements that the user will be selecting to open the modal that will be animated.

Demo

Card title

Card content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem.

Code



<!-- Add the class 'article-btn' to the card element they are clicking on to set up the animation -->
<a class="cui card article-btn" id="{{ Card ID }}" type="button" data-toggle="modal" data-target="{{ Modal Target ID }}">
	<div class="card-media">
		<!-- Background image -->
		<div class="background-image ratio-16x9" style="background-image: url( '{{ Background Image URL }}' );"></div>
	</div>
	<div class="card-body">
		<h3 class="card-title">{{ Card Title }}</h3>
		<p>{{ Card Content }}</p>
	</div>
</a>

<!-- Add the class `modal-fs-mobile` and 'modal-large' to the `.modal-dialog` element to make the modal fullscreen. -->
<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 modal-large" role="document">
		<div class="modal-content">
			...
		</div>
	</div>
</div>

Optional fullscreen size

This variant makes the modal fullscreen for all screen sizes.

This variant is useful in situations where the user requires the full screen to make it easier to complete their task. For example, the modal could contain a map, which the user would need to interact with before proceeding to the next step.

Apply the optional modifier class modal-fs to the .modal-dialog element. The fullscreen style will be in effect for all screen sizes including mobile, tablet, and desktop.

Code


<!-- Add the class `modal-fs` to the `.modal-dialog` element to make the modal fullscreen. -->
<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" 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.

Note: Another method to prevent the usability issue for mobile users is to set the static backdrop.

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>