change up the z-indexing and add some popover/twipsy content to the test modal on the js docs to help avoid future bugs

6 files changed, 25 insertions, 16 deletions

diff --git a/bootstrap.css b/bootstrap.css
index 273cbfa69..0b6a41118 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Sat Jan  7 04:06:22 PST 2012
+ * Date: Sat Jan  7 04:15:19 PST 2012
  */
 html, body {
   margin: 0;
@@ -2234,7 +2234,7 @@ i {
   position: fixed;
   top: 50%;
   left: 50%;
-  z-index: 11000;
+  z-index: 1030;
   max-height: 500px;
   overflow: auto;
   width: 560px;
@@ -2304,7 +2304,7 @@ i {
 }
 .twipsy {
   position: absolute;
-  z-index: 1000;
+  z-index: 1050;
   display: block;
   visibility: visible;
   padding: 5px;
@@ -2382,7 +2382,7 @@ i {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 1020;
+  z-index: 1040;
   display: none;
   padding: 5px;
 }
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 395f287d6..eeec05c16 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -376,7 +376,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
 .pagination.centered{text-align:center;}
 .modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1020;background-color:#000000;}.modal-backdrop.fade{opacity:0;}
 .modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
-.modal{position:fixed;top:50%;left:50%;z-index:11000;max-height:500px;overflow:auto;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;}
+.modal{position:fixed;top:50%;left:50%;z-index:1030;max-height:500px;overflow:auto;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;}
 .modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;}
 .modal.fade.in{top:50%;}
 .modal-header{padding:5px 15px;border-bottom:1px solid #eee;}
@@ -384,7 +384,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
 .modal-footer{padding:14px 15px 15px;margin-bottom:0;background-color:#f5f5f5;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;}.modal-footer:before,.modal-footer:after{display:table;*display:inline;content:"";zoom:1;}
 .modal-footer:after{clear:both;}
 .modal-footer .btn{float:right;margin-left:5px;}
-.twipsy{position:absolute;z-index:1000;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.twipsy.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
+.twipsy{position:absolute;z-index:1050;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.twipsy.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
 .twipsy.top{margin-top:-2px;}
 .twipsy.right{margin-left:2px;}
 .twipsy.bottom{margin-top:2px;}
@@ -395,7 +395,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
 .twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
 .twipsy-inner{max-width:200px;padding:3px 8px;color:white;text-align:center;text-decoration:none;background-color:#000000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
 .twipsy-arrow{position:absolute;width:0;height:0;}
-.popover{position:absolute;top:0;left:0;z-index:1020;display:none;padding:5px;}.popover.top{margin-top:-5px;}
+.popover{position:absolute;top:0;left:0;z-index:1040;display:none;padding:5px;}.popover.top{margin-top:-5px;}
 .popover.right{margin-left:5px;}
 .popover.bottom{margin-top:5px;}
 .popover.left{margin-left:-5px;}
diff --git a/docs/javascript.html b/docs/javascript.html
index 4671dd6eb..0aebf8609 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -235,7 +235,14 @@ $('#myModal').on('hidden', function () {
               <h3>Modal Heading</h3>
             </div>
             <div class="modal-body">
-              <p>One fine body…</p>
+              <h4>Text in a modal</h4>
+              <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
+
+              <h4>Popover in a modal</h4>
+              <p>This <a href="#" class="btn" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p>
+
+              <h4>Twipsy tooltips in a modal</h4>
+              <p><a href="#" class="twipsy-test" title="Tooltip">This link</a> and <a href="#" class="twipsy-test" title="Tooltip">that link</a> should have Twipsy tooltips on hover.</p>
             </div>
             <div class="modal-footer">
               <a href="#" class="btn primary">Save changes</a>
@@ -1144,6 +1151,7 @@ $('.myCarousel').carousel({
         $('.twipsy-demo.well').twipsy({
           selector: "a[rel=twipsy]"
         })
+        $('.twipsy-test').twipsy()
 
         // popover demo
         $("a[rel=popover]")
diff --git a/lib/dropdowns.less b/lib/dropdowns.less
index fc333a4cd..00c686dc2 100644
--- a/lib/dropdowns.less
+++ b/lib/dropdowns.less
@@ -27,7 +27,7 @@
 .dropdown-menu {
   position: absolute;
   top: 40px;
-  z-index: @zindexDropdowns;
+  z-index: @zindexDropdown;
   float: left;
   display: none; // none by default, but block on "open" of the menu
   min-width: 160px;
diff --git a/lib/modals.less b/lib/modals.less
index 8183194b7..dbac5ff87 100644
--- a/lib/modals.less
+++ b/lib/modals.less
@@ -7,7 +7,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: @zindexPopover;
+  z-index: @zindexModalBackdrop;
   background-color: @black;
   // Fade for backdrop
   &.fade { opacity: 0; }
@@ -22,7 +22,7 @@
   position: fixed;
   top: 50%;
   left: 50%;
-  z-index: 11000;
+  z-index: @zindexModal;
   max-height: 500px;
   overflow: auto;
   width: 560px;
diff --git a/lib/variables.less b/lib/variables.less
index 3db5839b0..37f5adb71 100644
--- a/lib/variables.less
+++ b/lib/variables.less
@@ -49,11 +49,12 @@
 
 // Z-INDEX
 // -------
-@zindexDropdowns:     1000;
-@zindexTwipsy:        1000;
-@zindexFixedNavbar:   1010;
-@zindexPopover:       1020;
-@zindexModal:         1030;
+@zindexDropdown:        1000;
+@zindexFixedNavbar:     1010;
+@zindexModalBackdrop:   1020;
+@zindexModal:           1030;
+@zindexPopover:         1040;
+@zindexTwipsy:          1050;
 
 
 // THEME VARIABLES