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

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;

docs/assets/js/application.js

@@ -69,13 +69,8 @@
       selector: "a[rel=tooltip]"
     })
 
-    $('.tooltip-test').tooltip({
+    $('.tooltip-test').tooltip()
-      'z-index': 3000
+    $('.popover-test').popover()
-    })
-
-    $('.popover-test').popover({
-      'z-index': 3000
-    })
 
     // popover demo
     $("a[rel=popover]")

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>

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>

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

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 )

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;