0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00

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
This commit is contained in:
Johann-S 2017-06-21 11:47:14 +02:00 committed by GitHub
parent 16d77b4cb0
commit 38ddf9ec28
3 changed files with 16 additions and 3 deletions

View File

@ -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;

View File

@ -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>

View File

@ -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';