From 420bfbc0addf1cb25c89d3c0e28acfdb800ec39e Mon Sep 17 00:00:00 2001
From: Dave Heineman <dheineman@live.nl>
Date: Fri, 29 Jul 2022 21:29:53 +0200
Subject: [PATCH] Fix rendering of modal examples on docs page

---
 src/pages/_docs/modals.md | 32 ++++++++++++++++++++------------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/pages/_docs/modals.md b/src/pages/_docs/modals.md
index 73223d7775..f6055dfc0d 100644
--- 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 %}