Skip to content
Permalink
Browse files

fix z-index issue with modals for popovers,tooltips,and dropdowns

  • Loading branch information...
fat committed Jan 28, 2012
1 parent c2c02d1 commit 12d3c2fe74bbe2570e47a2c8d7154a3011bd0770
@@ -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;
@@ -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]")
@@ -748,12 +748,6 @@ <h3>Options</h3>
<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 @@ <h3>Options</h3>
<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 @@ <h3>About</h3>
<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 @@ <h2>Example accordion</h2>
</div>
</div>


<hr>
<h2>Using bootstrap-collapse.js</h2>
<p>Enable via javascript:</p>
@@ -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>
@@ -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
@@ -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 )
@@ -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;

0 comments on commit 12d3c2f

Please sign in to comment.
You can’t perform that action at this time.