From 12d3c2fe74bbe2570e47a2c8d7154a3011bd0770 Mon Sep 17 00:00:00 2001
From: Jacob Thornton <jacobthornton@gmail.com>
Date: Sat, 28 Jan 2012 12:08:41 -0800
Subject: [PATCH] fix z-index issue with modals for popovers,tooltips,and
dropdowns
---
docs/assets/css/bootstrap.css | 12 ++++++++++++
docs/assets/js/application.js | 9 ++-------
docs/javascript.html | 16 ++--------------
docs/templates/pages/javascript.mustache | 16 ++--------------
js/bootstrap-modal.js | 4 ++++
js/bootstrap-tooltip.js | 3 ---
less/modals.less | 7 +++++++
7 files changed, 29 insertions(+), 38 deletions(-)
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index cd0d620bf4..1cce5e9df4 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 8fd672bb39..585700f8e3 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 2d31f0aa4a..f1ce98658b 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 01b14b6765..46420660a7 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 91daa8af67..ba64368b2d 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 67fca5e143..21f2311fb2 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 7f07d11e49..3e74f42270 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;
--
GitLab