diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index cd0d620bf4216dff0c46ceafcd6bcf7f06da81a4..1cce5e9df40f7e5fba73cafe36a09701784ecbd3 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2238,6 +2238,18 @@ table .span12 {
.pager .previous a {
float: left;
}
+.modal-open .dropdown-menu {
+ z-index: 2050;
+}
+.modal-open .dropdown.open {
+ *z-index: 2050;
+}
+.modal-open .popover {
+ z-index: 2060;
+}
+.modal-open .tooltip {
+ z-index: 2070;
+}
.modal-backdrop {
position: fixed;
top: 0;
diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index 8fd672bb39842de936e996f60f0242bc32150795..585700f8e3289e8ea24d6c03f0c95fb3290e2c53 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -69,13 +69,8 @@
selector: "a[rel=tooltip]"
})
- $('.tooltip-test').tooltip({
- 'z-index': 3000
- })
-
- $('.popover-test').popover({
- 'z-index': 3000
- })
+ $('.tooltip-test').tooltip()
+ $('.popover-test').popover()
// popover demo
$("a[rel=popover]")
diff --git a/docs/javascript.html b/docs/javascript.html
index 2d31f0aa4aba53082cffca09dc760ad0cd0775ad..f1ce98658b74dbecf2bbd4aa57048978a905e8ec 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -748,12 +748,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
</td>
</tr>
- <tr>
- <td>z-index</td>
- <td>number</td>
- <td>1020</td>
- <td>The tooltips z-index value</td>
- </tr>
</tbody>
</table>
<div class="alert alert-info">
@@ -860,12 +854,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
</td>
</tr>
- <tr>
- <td>z-index</td>
- <td>number</td>
- <td>1010</td>
- <td>The popovers z-index value</td>
- </tr>
</tbody>
</table>
<div class="alert alert-info">
@@ -1086,7 +1074,7 @@ $('#my-alert').bind('closed', function () {
<div class="span9 columns">
<h2>Example accordion</h2>
<p>Using the collapse plugin, we built a simple accordion style widget:</p>
-
+
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
@@ -1126,7 +1114,7 @@ $('#my-alert').bind('closed', function () {
</div>
</div>
-
+
<hr>
<h2>Using bootstrap-collapse.js</h2>
<p>Enable via javascript:</p>
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 01b14b67650c42b5859bc2814f4d1887936d8a5c..46420660a7401f27117f2ce6021cc7c78e87427b 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -683,12 +683,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
</td>
</tr>
- <tr>
- <td>{{_i}}z-index{{/i}}</td>
- <td>{{_i}}number{{/i}}</td>
- <td>1020</td>
- <td>The tooltips z-index value</td>
- </tr>
</tbody>
</table>
<div class="alert alert-info">
@@ -795,12 +789,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
</td>
</tr>
- <tr>
- <td>{{_i}}z-index{{/i}}</td>
- <td>{{_i}}number{{/i}}</td>
- <td>1010</td>
- <td>The popovers z-index value</td>
- </tr>
</tbody>
</table>
<div class="alert alert-info">
@@ -1021,7 +1009,7 @@ $('#my-alert').bind('closed', function () {
<div class="span9 columns">
<h2>{{_i}}Example accordion{{/i}}</h2>
<p>{{_i}}Using the collapse plugin, we built a simple accordion style widget:{{/i}}</p>
-
+
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
@@ -1061,7 +1049,7 @@ $('#my-alert').bind('closed', function () {
</div>
</div>
-
+
<hr>
<h2>{{_i}}Using bootstrap-collapse.js{{/i}}</h2>
<p>Enable via javascript:</p>
diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js
index 91daa8af6711aa9284a6a4844a77c4fab9e61411..ba64368b2d48301ac07ce664704223642c4614d1 100644
--- a/js/bootstrap-modal.js
+++ b/js/bootstrap-modal.js
@@ -44,6 +44,8 @@
if (this.isShown) return
+ $('body').addClass('modal-open')
+
this.isShown = true
this.$element.trigger('show')
@@ -77,6 +79,8 @@
var that = this
this.isShown = false
+ $('body').removeClass('modal-open')
+
escape.call(this)
this.$element
diff --git a/js/bootstrap-tooltip.js b/js/bootstrap-tooltip.js
index 67fca5e143997b70c8701f05ae3857cd43ae552b..21f2311fb23342dc6de180c2022b0b818d3a60c3 100644
--- a/js/bootstrap-tooltip.js
+++ b/js/bootstrap-tooltip.js
@@ -145,8 +145,6 @@
break
}
- if (this.options['z-index']) tp['z-index'] = this.options['z-index']
-
$tip
.css(tp)
.addClass(placement)
@@ -267,7 +265,6 @@
, trigger: 'hover'
, title: ''
, template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
- , 'z-index': false
}
}( window.jQuery )
diff --git a/less/modals.less b/less/modals.less
index 7f07d11e4995640dcda2842ec3eadfa8a9a9cb01..3e74f422701b254634e66e3441ccf5e7318c0d07 100644
--- a/less/modals.less
+++ b/less/modals.less
@@ -1,6 +1,13 @@
// MODALS
// ------
+.modal-open {
+ .dropdown-menu { z-index: @zindexDropdown + @zindexModal }
+ .dropdown.open { *z-index: @zindexDropdown + @zindexModal }
+ .popover { z-index: @zindexPopover + @zindexModal }
+ .tooltip { z-index: @zindexTooltip + @zindexModal }
+}
+
.modal-backdrop {
position: fixed;
top: 0;