Fix modal overflow with our navbar documentation and fix typo (#22864)

* Fix modal overflow with our navbar documentation and fix typo

* Fix z-index backdrop and modal with popover/tooltip example

diff --git a/assets/scss/_component-examples.scss b/assets/scss/_component-examples.scss
index 84dc457810dd2624a43ff068dee54cb87ef8935a..4424d3a17aeff19496b365284d582a73e80c7187 100644 (file)
--- a/assets/scss/_component-examples.scss
+++ b/assets/scss/_component-examples.scss
@@ -285,6 +285,19 @@
   }
 }
 
+.modal.show {
+  z-index: 1072;
+
+  .tooltip, .popover {
+    z-index: 1073;
+  }
+}
+
+.modal-backdrop {
+  z-index: 1071;
+}
+
+
 // Example tabbable tabs
 .bd-example-tabs .nav-tabs {
   margin-bottom: 1rem;

diff --git a/docs/4.0/components/modal.md b/docs/4.0/components/modal.md
index 913f81eb0d88f7cb35b005b35aea93622c0bed30..25891bf40dacc376762c3b4e87587ce7ef0e44b0 100644 (file)
--- a/docs/4.0/components/modal.md
+++ b/docs/4.0/components/modal.md
@@ -226,10 +226,10 @@ When modals become too long for the user's viewport or device, they scroll indep
       </div>
       <div class="modal-body">
         <h5>Popover in a modal</h5>
-        <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
+        <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute." data-container="#exampleModalPopovers">button</a> triggers a popover on click.</p>
         <hr>
         <h5>Tooltips in a modal</h5>
-        <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
+        <p><a href="#" class="tooltip-test" title="Tooltip" data-container="#exampleModalPopovers">This link</a> and <a href="#" class="tooltip-test" title="Tooltip" data-container="#exampleModalPopovers">that link</a> have tooltips on hover.</p>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

diff --git a/docs/4.0/getting-started/webpack.md b/docs/4.0/getting-started/webpack.md
index b22fad36da63ecc598f3afb3db10b6cc7b423bdc..84ad74c7f7626a14ef83721152f06bcd1d8dec19 100644 (file)
--- a/docs/4.0/getting-started/webpack.md
+++ b/docs/4.0/getting-started/webpack.md
@@ -12,7 +12,7 @@ toc: true
 
 ## Importing JavaScript
 
-Import [Bootstrap's JavaScript](/getting-started/javascript/) by adding this line to your app's entry point (usally `index.js` or `app.js`):
+Import [Bootstrap's JavaScript](/getting-started/javascript/) by adding this line to your app's entry point (usually `index.js` or `app.js`):
 
 {% highlight js %}
 import 'bootstrap';