Modal - add backdrop class customization (#2181)

mdbootstrap · Nov 30, 2023 · f0f3552 · f0f3552
1 parent 206a0f2
commit f0f3552
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/site/content/docs/standard/components/modal/a.html b/site/content/docs/standard/components/modal/a.html
@@ -358,6 +358,21 @@ <h4 class="mt-4 font-bold">Via JavaScript</h4>
                     <tbody>
                       <tr
                         class="border-b bg-neutral-100 dark:border-neutral-500 dark:bg-neutral-700">
+                        <td
+                          class="border-r px-6 py-4 font-medium dark:border-neutral-500 max-lg:whitespace-nowrap">
+                          <code>backdrop</code>
+                        </td>
+                        <td
+                          class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
+                          opacity-50 transition-all duration-300 ease-in-out
+                          fixed top-0 left-0 z-[1040] bg-black w-screen h-screen
+                        </td>
+                        <td class="px-6 py-4 max-lg:whitespace-nowrap">
+                          Sets styles for the backdrop.
+                        </td>
+                      </tr>
+                      <tr
+                        class="border-b bg-white dark:border-neutral-500 dark:bg-neutral-600">
                         <td
                           class="border-r px-6 py-4 font-medium dark:border-neutral-500 max-lg:whitespace-nowrap">
                           <code>static</code>
@@ -372,7 +387,7 @@ <h4 class="mt-4 font-bold">Via JavaScript</h4>
                         </td>
                       </tr>
                       <tr
-                        class="border-b bg-white dark:border-neutral-500 dark:bg-neutral-600">
+                        class="border-b bg-neutral-100 dark:border-neutral-500 dark:bg-neutral-700">
                         <td
                           class="border-r px-6 py-4 font-medium dark:border-neutral-500 max-lg:whitespace-nowrap">
                           <code>staticProperties</code>

diff --git a/src/js/components/modal.js b/src/js/components/modal.js
@@ -50,12 +50,15 @@ const DefaultClasses = {
   show: "transform-none",
   static: "scale-[1.02]",
   staticProperties: "transition-scale duration-300 ease-in-out",
+  backdrop:
+    "opacity-50 transition-all duration-300 ease-in-out fixed top-0 left-0 z-[1040] bg-black w-screen h-screen",
 };
 
 const DefaultClassesType = {
   show: "string",
   static: "string",
   staticProperties: "string",
+  backdrop: "string",
 };
 
 const EVENT_HIDE = `hide${EVENT_KEY}`;
@@ -216,6 +219,7 @@ class Modal extends BaseComponent {
     return new Backdrop({
       isVisible: Boolean(this._config.backdrop), // 'static' option will be translated to true, and booleans will keep their value
       isAnimated: this._isAnimated(),
+      backdropClasses: this._classes.backdrop,
     });
   }
 

diff --git a/src/js/util/backdrop.js b/src/js/util/backdrop.js
@@ -32,7 +32,7 @@ const DefaultType = {
   isAnimated: "boolean",
   rootElement: "(element|string)",
   clickCallback: "(function|null)",
-  backdropClasses: "(array|null)",
+  backdropClasses: "(array|string|null)",
 };
 const NAME = "backdrop";
 const EVENT_MOUSEDOWN = `mousedown.te.${NAME}`;