Modals
Import
Import the settings, the modal, the bodys, and the button scss files.
Note that you can also implement in addition the scss file of the links if you use this component in your modals.
@import 'settings-tools/all-settings';@import 'typography/t.bodys';@import 'components/c.divider';@import 'components/c.modal';@import 'components/c.button';
Usage
A modal is composed of several zones:
- A header with the class :
mc-modal__header
- A body with class:
mc-modal__body
- A footer with class:
mc-modal__footer
These areas are then encompassed in:
- A specific container with the class:
mc-modal__dialog
- A global wrapper with the class:
mc-modal
<div class="example"> <div class="mc-modal" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true" > <div class="mc-modal__dialog" role="document"> <header class="mc-modal__header mc-divider-bottom mc-divider-bottom--light" > <h2 class="mc-modal__title" id="modalTitle">Modal Title</h2> <button class="mc-modal__close" type="button"> <span class="mc-modal__close-text">Close</span> </button> </header> <main class="mc-modal__body"> <article class="mc-modal__content"> <h3 class="mc-modal__heading">Title</h3> <div class="mc-modal__inner mt-body-m"> <p>Content paragraph</p> </div> </article> </main> <footer class="mc-modal__footer"> <button type="button" class="mc-button"> <span class="mc-button__label">Button label</span> </button> </footer> </div> </div></div>
Detail of areas
In more detail, it should be noted that each of the fields mentioned above may contain other elements. Thus:
The header
The header contains:
- the title of the modal (
.mc-modal__title
) - as well as its close button (
.mc-modal__close
)
These elements are mandatory and must always be present in your modal code.
The body
The body can contain:
- a content area (
.mc-modal__content
) - a heading (
.mc-modal__heading
) - as well as an inner content where you can add paragraph elements (
.mc-modal__inner.mt-body-m
)
Note that the heading is an optional element
The footer
The footer is the area that allows you to insert call-to-actions. This zone must always be present in your modals, and can contain one or more elements. See details about the footer.
Note that call to actions always take 100% of the modal's width on
breakpoint-s
.
Variations
Header with icon
As detailed above, you can add an icon in the header. You can do this in the following way:
The width of the icon is 24px (
$mu150
)
Scrolling long content
Footer - two call to actions
A primary call to action button accompanied with a secondary button to give the user an alternative choice.
Footer - call to action and link
A primary call to action button with a link to redirect the user to a page to give more informations.
Behaviour
Max-width
Modals are responsive elements, therefore with a variable width depending on the screen resolution. Thus the width of a modal varies as follows:
Breakpoint | Modal width |
---|---|
S | 100% |
M | 38,5mu (616px) |
L | 48mu (768px) |
XL | 50mu (800px) |
XXL | 56,5mu (904px) |
Max-height
Just as the width of a modal varies according to the rules indicated above, the height of the modal also has max-height rules of variation:
Breakpoint | Modal max-height |
---|---|
S | 100% (16px margin-top and bottom) |
M | 1:2 screen |
L | 2:3 screen |
XL | 2:3 screen |
XXL | 1:2 screen |
On opening
During the opening of a modal by Javascript, several events occur:
- Added the
is-open
class on themc-modal__dialog
element. - A
mc-modal-overlay
element is generated in the DOM. This element must also have the classis-visible
.
Prevent body from scrolling
When you use a modal, by definition, it opens on top of the content of your page.
But depending on your context of use, you may need to prevent the user from scrolling the page in the background of your modal.
That's why Mozaic provides you with a css utility class allowing you to lock the use of scroll.
To do this, you need to add the .mu-prevent-body-scroll
class to both the html
and body
tags.
When using this utility class, do not forget to import the associated SCSS file:
@import 'utilities/u.scroll';
Note that the use of this class is not imposed by Mozaic but left to your discretion.