diff --git a/assets/scss/_component-examples.scss b/assets/scss/_component-examples.scss index 84dc457810dd2624a43ff068dee54cb87ef8935a..4424d3a17aeff19496b365284d582a73e80c7187 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 913f81eb0d88f7cb35b005b35aea93622c0bed30..25891bf40dacc376762c3b4e87587ce7ef0e44b0 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 b22fad36da63ecc598f3afb3db10b6cc7b423bdc..84ad74c7f7626a14ef83721152f06bcd1d8dec19 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';