Modal
Provides styles for different types of modals.
Overview
Modals are used to show content to the user. These are made up by four main
sections, header, body, actions and footer. Each section can contain several
elements like title, action buttons, etc.
Modals are styled with the .modal class
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus dolor felis, a accumsan eros dictum non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus dolor felis, a accumsan.
<div class="modal show" id="example-modal" tabindex="-1" role="dialog" aria-labelledby="example-modal">
<div class="modal__dialog" role="document">
<div class="modal__header">
<h3 class="modal__title">Title</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal__body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus dolor felis, a accumsan eros dictum non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus dolor felis, a accumsan.
</div>
<div class="modal__actions">
<a href="" class="btn">Tertiary button</a><a href="" class="btn btn--primary">Primary button</a>
</div>
</div>
</div>
The modal header is styled with the .modal__header class and can contain
a sub-title, a title, a content-share button and a closing 'x' button.
<div class="modal show" id="example-modal-header-1" tabindex="-1" role="dialog" aria-labelledby="example-modal-header-1">
<div class="modal__dialog" role="document">
<div class="modal__header">
<div class="modal__sub-title">Sub-title</div>
<h3 class="modal__title">Title</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
<button type="button" class="modal__share icon-share" data-toggle="tooltip"
data-html="true" data-placement="bottom" data-trigger="click" data-title='<div class="social-share__box">Digital Citizenship<div class="social-share__box-divider"></div>
<a href="#" class="social-share__icon-link icon-email"></a><a href="#" class="social-share__icon-link icon-printer-solid"></a></div>'>
More
</button>
</div>
</div>
</div>
<div class="modal show" id="example-modal-header-2" tabindex="-1" role="dialog" aria-labelledby="example-modal-header-2">
<div class="modal__dialog" role="document">
<div class="modal__header">
<h3 class="modal__title">Title</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
<button type="button" class="modal__share icon-share" data-toggle="tooltip"
data-html="true" data-placement="bottom" data-trigger="click" data-title='<div class="social-share__box">Digital Citizenship<div class="social-share__box-divider"></div>
<a href="#" class="social-share__icon-link icon-email"></a><a href="#" class="social-share__icon-link icon-printer-solid"></a></div>'>
More
</button>
</div>
</div>
</div>
The modal header supports a black variant using the .modal--dark class along
with the root .modal class.
<div class="modal modal--dark show" id="example-modal-header-dark" tabindex="-1" role="dialog" aria-labelledby="example-modal-header-dark">
<div class="modal__dialog" role="document">
<div class="modal__header">
<h3 class="modal__title">Title</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
<button type="button" class="modal__share icon-share" data-toggle="tooltip"
data-html="true" data-placement="bottom" data-trigger="click" data-title='<div class="social-share__box">Digital Citizenship<div class="social-share__box-divider"></div>
<a href="#" class="social-share__icon-link icon-email"></a><a href="#" class="social-share__icon-link icon-printer-solid"></a></div>'>
More
</button>
</div>
</div>
</div>
Body & action
The modal body is styled with the .modal__body class and can contain
content to show to the user. The modal actions are styled with the
.modal__actions class and can contain one or two action buttons.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus dolor felis, a accumsan eros dictum non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus dolor felis, a accumsan.
<div class="modal show" id="example-modal-body" tabindex="-1" role="dialog" aria-labelledby="example-modal-body">
<div class="modal__dialog" role="document">
<div class="modal__body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus dolor felis, a accumsan eros dictum non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus dolor felis, a accumsan.
</div>
<div class="modal__actions">
<a href="#" class="btn">Tertiary button</a><a href="#" class="btn btn--primary">Primary button</a>
</div>
</div>
</div>
The modal footer is styled with the .modal__footer class and can contain
short footer notes.
<div class="modal show" id="example-modal-footer" tabindex="-1" role="dialog" aria-labelledby="example-modal-footer">
<div class="modal__dialog" role="document">
<div class="modal__footer">Optional footnote section</div>
</div>
</div>
Live examples
Modals must provide and set an id to the root .modal element. This is
required to identify each modal instance and be able to show them when using
the trigger elemets. An element can be used as a trigger element using the
data-toggle="modal" data attribute. The modal the trigger will show is
set using the data-modal="{moodal-id}" data attribute.
Show live example modal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fringilla viverra purus. Aliquam erat volutpat. Praesent ipsum massa, mattis id augue tristique, volutpat hendrerit dolor. Proin interdum magna a sem dapibus posuere. Curabitur vestibulum erat id dolor ornare, vitae ultrices metus vulputate. In non lobortis risus. Morbi nec maximus nibh. In hac habitasse platea dictumst. Etiam varius dictum ullamcorper.
<a href="#" data-toggle="modal" data-target="#example-modal-live">Show live example modal</a>
<div class="modal fade" id="example-modal-live" tabindex="-1" role="dialog" aria-labelledby="example-modal-live">
<div class="modal__dialog" role="document">
<div class="modal__header">
<div class="modal__sub-title">Optional sub-title</div>
<h3 class="modal__title">Title</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fringilla viverra purus. Aliquam erat volutpat. Praesent ipsum massa, mattis id augue tristique, volutpat hendrerit dolor. Proin interdum magna a sem dapibus posuere. Curabitur vestibulum erat id dolor ornare, vitae ultrices metus vulputate. In non lobortis risus. Morbi nec maximus nibh. In hac habitasse platea dictumst. Etiam varius dictum ullamcorper.</p>
</div>
<div class="modal__actions">
<a href="" class="btn">Tertiary button</a><a href="" class="btn btn--primary">Primary button</a>
</div>
<div class="modal__footer">Optional footnote section </div>
</div>
</div>
Modal full-screen
Modal can be shown as full screen modal using the .modal--full class
along with the root .modal class.
Show live example full-screen modal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fringilla viverra purus. Aliquam erat volutpat. Praesent ipsum massa, mattis id augue tristique, volutpat hendrerit dolor. Proin interdum magna a sem dapibus posuere. Curabitur vestibulum erat id dolor ornare, vitae ultrices metus vulputate. In non lobortis risus. Morbi nec maximus nibh. In hac habitasse platea dictumst. Etiam varius dictum ullamcorper.
Quisque a rhoncus ante. Vivamus vulputate id velit in fringilla. Praesent augue lorem, semper bibendum justo id, ultricies iaculis diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus lacus quam, viverra a tellus sit amet, fermentum congue dolor. Nulla ornare ac velit eget ornare. Morbi rutrum consequat arcu at tempor. Aliquam sit amet est nibh. Proin lobortis sem et viverra volutpat. Morbi fringilla nibh et lacus tempor mattis. Fusce sit amet ullamcorper risus, quis bibendum velit. Phasellus eu laoreet tellus, sed maximus mi.
<a href="#" data-toggle="modal" data-target="#example-modal-live-full">Show live example full-screen modal</a>
<div class="modal modal--full fade" id="example-modal-live-full" tabindex="-1" role="dialog" aria-labelledby="example-modal-live-full">
<div class="modal__dialog" role="document">
<div class="modal__header">
<h3 class="modal__title">Title</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fringilla viverra purus. Aliquam erat volutpat. Praesent ipsum massa, mattis id augue tristique, volutpat hendrerit dolor. Proin interdum magna a sem dapibus posuere. Curabitur vestibulum erat id dolor ornare, vitae ultrices metus vulputate. In non lobortis risus. Morbi nec maximus nibh. In hac habitasse platea dictumst. Etiam varius dictum ullamcorper.</p>
<p>Quisque a rhoncus ante. Vivamus vulputate id velit in fringilla. Praesent augue lorem, semper bibendum justo id, ultricies iaculis diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus lacus quam, viverra a tellus sit amet, fermentum congue dolor. Nulla ornare ac velit eget ornare. Morbi rutrum consequat arcu at tempor. Aliquam sit amet est nibh. Proin lobortis sem et viverra volutpat. Morbi fringilla nibh et lacus tempor mattis. Fusce sit amet ullamcorper risus, quis bibendum velit. Phasellus eu laoreet tellus, sed maximus mi.</p>
</div>
<div class="modal__actions">
<a href="" class="btn">Tertiary button</a><a href="" class="btn btn--primary">Primary button</a>
</div>
<div class="modal__footer">Optional footnote section </div>
</div>
</div>
Modal can also be used to show media to the user. The media modals are styled
using the .modal--nedia class along with the .modal class. These do not
provide both actions and footer sections. The body of a media modal can provide
additional elements, the actual media to show to user, a media info panel open
button, a media info panel and a media info panel close button depending on the
need of the type of media to show (video, image, slider, etc).
<a href="#" data-toggle="modal" data-target="#example-modal-media">Show media modal</a>
<div class="modal modal--media fade" id="example-modal-media" tabindex="-1" role="dialog" aria-labelledby="example-modal-media">
<div class="modal__dialog" role="document">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
<div class="modal__header">
<div class="modal__sub-title">Optional sub-title</div>
<h3 class="modal__title">Video Title</h3>
<button type="button" class="modal__share icon-share" data-toggle="tooltip"
data-html="true" data-placement="bottom" data-trigger="click" data-title='<div class="social-share__box">Digital Citizenship<div class="social-share__box-divider"></div>
<a href="#" class="social-share__icon-link icon-email"></a><a href="#" class="social-share__icon-link icon-printer-solid"></a></div>'>
More
</button>
</div>
<div class="modal__body">
<div class="modal__media">
<img src="https://dt77qwgp6ykyk.cloudfront.net/sites/default/files/styles/video_thumbnail_hd_large/public/video-thumbnails/toy-story-4-site_0.jpg?itok=Vwuy54Az">
</div>
</div>
</div>
</div>
Video
A video modal must provide all the body elements. These are styled using the
.modal__media class for the actual media, .modal__media-info-open class
for the info open button, .modal__media-info class for the info panel and
.modal__media-info-close class for the info close button. To make it work
properly, the media info panel HTML must be added before the media one.
<a href="#" data-toggle="modal" data-target="#example-modal-media-video-1">Show video modal 1</a>
<div class="modal modal--media fade" id="example-modal-media-video-1" tabindex="-1" role="dialog" aria-labelledby="example-modal-media-video-1">
<div class="modal__dialog" role="document">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
<div class="modal__header">
<div class="modal__sub-title">Optional sub-title</div>
<h3 class="modal__title">Video Title</h3>
<button type="button" class="modal__share icon-share" data-toggle="tooltip"
data-html="true" data-placement="bottom" data-trigger="click" data-title='<div class="social-share__box">Digital Citizenship<div class="social-share__box-divider"></div>
<a href="#" class="social-share__icon-link icon-email"></a><a href="#" class="social-share__icon-link icon-printer-solid"></a></div>'>
More
</button>
</div>
<div class="modal__body">
<div class="modal__media">
<img src="https://dt77qwgp6ykyk.cloudfront.net/sites/default/files/styles/video_thumbnail_hd_large/public/video-thumbnails/toy-story-4-site_0.jpg?itok=Vwuy54Az">
</div>
<div class="modal__media-info">
<div class="modal__media-info-text">
Nam quis nulla. Integer malesuada. In in enim a arcu imperdiet malesuada. Sed vel lectus. Donec odio urna, tempus molestie, porttitor ut, iaculis quis, sem. Phasellus rhoncus. Aenean id metus id velit ullamcorper pulvinar. Nam quis nulla. Integer malesuada. In in enim a arcu imperdiet malesuada. Sed vel lectus.
</div>
<div class="modal__media-info-action">
<button type="button" class="btn btn--secondary btn--block">Secondary button</button>
</div>
</div>
</div>
</div>
</div>
<a href="#" data-toggle="modal" data-target="#example-modal-media-video-2">Show video modal 2</a>
<div class="modal modal--media fade" id="example-modal-media-video-2" tabindex="-1" role="dialog" aria-labelledby="example-modal-media-video-2">
<div class="modal__dialog" role="document">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
<div class="modal__header">
<div class="modal__sub-title">Optional sub-title</div>
<h3 class="modal__title">Video Title</h3>
<button type="button" class="modal__share icon-share" data-toggle="tooltip"
data-html="true" data-placement="bottom" data-trigger="click" data-title='<div class="social-share__box">Digital Citizenship<div class="social-share__box-divider"></div>
<a href="#" class="social-share__icon-link icon-email"></a><a href="#" class="social-share__icon-link icon-printer-solid"></a></div>'>
More
</button>
</div>
<div class="modal__body">
<div class="modal__media">
<img src="https://dt77qwgp6ykyk.cloudfront.net/sites/default/files/styles/video_thumbnail_hd_large/public/video-thumbnails/toy-story-4-site_0.jpg?itok=Vwuy54Az">
</div>
<div class="modal__media-info">
<div class="modal__media-info-text">
Nam quis nulla. Integer malesuada. In in enim a arcu imperdiet malesuada. Sed vel lectus. Donec odio urna, tempus molestie, porttitor ut, iaculis quis, sem. Phasellus rhoncus. Aenean id metus id velit ullamcorper pulvinar. Nam quis nulla. Integer malesuada. In in enim a arcu imperdiet malesuada. Sed vel lectus.
<div class="modal__media-info-text-watch">
<strong>Continue watching:</strong>
<img src="https://dt77qwgp6ykyk.cloudfront.net/sites/default/files/styles/video_player_thumb/public/video-thumbnails/what-is-squad-horizontal-640-360.jpg">
</div>
</div>
<div class="modal__media-info-action">
<a href="#" class="link link--cta">Click here</a> for a lesson plan on this topic!
</div>
</div>
</div>
</div>
</div>
Download
Get a bundle with all modal styles.
Download
Get a bundle with all modal Javascript.
Download
<p>Get a bundle with all modal styles.</p>
<a href="/styles/molecules/modals.css" download="cs-modals.css" target="_blank" class="btn btn--primary">Download</a>
<p>Get a bundle with all modal Javascript.</p>
<a href="/js/modals.min.js" download="cs-modals.min.js" target="_blank" class="btn btn--primary">Download</a>
