Modals

figma:ready
react:ready
scss:ready
freemarker:ready
vue:ready
Usage
Code
Accessibility

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 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:

BreakpointModal width
S100%
M38,5mu (616px)
L48mu (768px)
XL50mu (800px)
XXL56,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:

BreakpointModal max-height
S100% (16px margin-top and bottom)
M1:2 screen
L2:3 screen
XL2:3 screen
XXL1:2 screen

On opening

During the opening of a modal by Javascript, several events occur:

  • Added the is-open class on the mc-modal__dialog element.
  • A mc-modal-overlay element is generated in the DOM. This element must also have the class is-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.