From: Johann-S <johann.servoire@gmail.com>
Date: Wed, 21 Jun 2017 09:47:14 +0000 (+0200)
Subject: Fix modal overflow with our navbar documentation and fix typo (#22864)
X-Git-Tag: v4.0.0-beta~125
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=38ddf9ec28235c1c1b6d9958248298a1f679db73;p=thirdparty%2Fbootstrap.git

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 84dc457810..4424d3a17a 100644
--- 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 913f81eb0d..25891bf40d 100644
--- 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 b22fad36da..84ad74c7f7 100644
--- 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';