diff --git a/packages/styles/components/_c.modal.scss b/packages/styles/components/_c.modal.scss
index e564902ed..6683128c3 100644
--- a/packages/styles/components/_c.modal.scss
+++ b/packages/styles/components/_c.modal.scss
@@ -20,7 +20,11 @@
background: $color-grey-000;
display: flex;
flex-direction: column;
+ opacity: 0;
+ pointer-events: all;
position: relative;
+ transform: translateY(-25%);
+ transition: transform 0.4s ease, opacity 0.4s ease;
width: 100%;
@include set-from-screen(m) {
@@ -41,6 +45,11 @@
max-height: 50vh;
max-width: magic-unit-rem(56.5, true); // 904px
}
+
+ &.is-open {
+ opacity: 1;
+ transform: translateY(0);
+ }
}
&__header,
diff --git a/src/docs/Components/Modals/code.mdx b/src/docs/Components/Modals/code.mdx
index 89a7dda39..eb31fa272 100644
--- a/src/docs/Components/Modals/code.mdx
+++ b/src/docs/Components/Modals/code.mdx
@@ -1,5 +1,5 @@
---
-title: 'Code'
+title: "Code"
order: 2
---
@@ -10,13 +10,13 @@ Import the **settings**, the **modal**, the **bodys**, and the **button** scss f
> Note that you can also implement in addition the scss file of **the links** if you use this component in your modals.
```scss
-@import 'settings-tools/_all-settings';
+@import "settings-tools/_all-settings";
@include import-font-families();
-@import 'typography/_t.bodys';
-@import 'components/_c.modal';
-@import 'components/_c.button';
+@import "typography/_t.bodys";
+@import "components/_c.modal";
+@import "components/_c.button";
```
## Usage
@@ -153,6 +153,7 @@ Just as the width of a modal varies according to the rules indicated above, the
During the opening of a modal by Javascript, several events occur:
- Added the `mc-modal-open` class to the body to prevent the default scrolling of the browser window.
-- A `mc-modal-overlay` element is generated in the DOM.
+- 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`.
diff --git a/src/docs/Components/Modals/previews/big-content.preview.html b/src/docs/Components/Modals/previews/big-content.preview.html
index 5d57d9c3b..5dd7c715d 100644
--- a/src/docs/Components/Modals/previews/big-content.preview.html
+++ b/src/docs/Components/Modals/previews/big-content.preview.html
@@ -6,7 +6,7 @@
aria-labelledby="modalTitle"
aria-hidden="true"
>
-