Fix rendering of modal examples on docs page (#1171)

tabler · Jul 30, 2022 · 03f5b50 · 03f5b50
1 parent 8f6753c
commit 03f5b50
Showing 1 changed file with 20 additions and 12 deletions.
diff --git a/src/pages/_docs/modals.md b/src/pages/_docs/modals.md
@@ -7,9 +7,11 @@ menu: docs.components.modals
 ## Default markup
 
 {% capture code %}
-<div class="modal-dialog" role="document">
-    <div class="modal-content">
-        {% include parts/modals/simple.html %}
+<div class="modal{% hide %} d-block position-relative{% endhide %}" tabindex="-1">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            {% include parts/modals/simple.html %}
+        </div>
     </div>
 </div>
 {% endcapture %}
@@ -19,18 +21,22 @@ menu: docs.components.modals
 ## Prompt and alert
 
 {% capture code %}
-<div class="modal-dialog modal-sm" role="document">
-    <div class="modal-content">
-        {% include parts/modals/danger.html %}
+<div class="modal{% hide %} d-block position-relative{% endhide %}" tabindex="-1">
+    <div class="modal-dialog modal-sm" role="document">
+        <div class="modal-content">
+            {% include parts/modals/danger.html %}
+        </div>
     </div>
 </div>
 {% endcapture %}
 {% include example.html code=code modal=true %}
 
 {% capture code %}
-<div class="modal-dialog modal-sm" role="document">
-    <div class="modal-content">
-        {% include parts/modals/success.html %}
+<div class="modal{% hide %} d-block position-relative{% endhide %}" tabindex="-1">
+    <div class="modal-dialog modal-sm" role="document">
+        <div class="modal-content">
+            {% include parts/modals/success.html %}
+        </div>
     </div>
 </div>
 {% endcapture %}
@@ -40,9 +46,11 @@ menu: docs.components.modals
 ## Modal with form
 
 {% capture code %}
-<div class="modal-dialog modal-lg" role="document">
-    <div class="modal-content">
-        {% include parts/modals/report.html %}
+<div class="modal{% hide %} d-block position-relative{% endhide %}" tabindex="-1">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            {% include parts/modals/report.html %}
+        </div>
     </div>
 </div>
 {% endcapture %}