Working on handling bugs for closing the modal. It must be managed di…

…fferently now that the modal is nested in the backdrop.
aroc · Mar 29, 2012 · 18c12da · 18c12da
1 parent f92d422
commit 18c12da
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 19 deletions.
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
@@ -3243,16 +3243,16 @@ input[type="submit"].btn.btn-mini {
   cursor: default;
 }
 .modal-open .dropdown-menu {
-  z-index: 2050;
+  z-index: 2060;
 }
 .modal-open .dropdown.open {
-  *z-index: 2050;
+  *z-index: 2060;
 }
 .modal-open .popover {
-  z-index: 2060;
+  z-index: 2070;
 }
 .modal-open .tooltip {
-  z-index: 2070;
+  z-index: 2080;
 }
 .modal-backdrop {
   overflow-x: hidden;
@@ -3276,15 +3276,15 @@ input[type="submit"].btn.btn-mini {
   top: 50px;
   left: 50%;
   margin-left: -280px;
-  z-index: 1049;
+  z-index: 1050;
   width: 560px;
   position: absolute;
   padding-bottom: 80px;
   overflow: visible;
 }
 .modal {
   margin: 0;
-  z-index: 1050;
+  z-index: 1060;
   overflow: auto;
   width: 560px;
   background-color: #ffffff;

diff --git a/docs/assets/js/bootstrap-modal.js b/docs/assets/js/bootstrap-modal.js
@@ -133,10 +133,6 @@
       this.$element.remove().prependTo(this.$elementWrapper)
       $('html').css({ 'overflow' : 'hidden'  })
 
-      this.$elementWrapper.click(function(e) {
-          event.stopPropagation()
-      })
-
       if (this.options.backdrop != 'static') {
         this.$backdrop.click($.proxy(this.hide, this))
       }

diff --git a/index.html b/index.html
@@ -0,0 +1,113 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Bootstrap, from Twitter</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <!-- Le styles -->
+    <link href="less/bootstrap.css" rel="stylesheet">
+    <style type="text/css">
+      body {
+        padding-top: 60px;
+        padding-bottom: 40px;
+      }
+    </style>
+
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+  </head>
+
+  <body>
+
+    <div class="navbar navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </a>
+          <a class="brand" href="#">Project name</a>
+          <div class="nav-collapse">
+            <ul class="nav">
+              <li class="active"><a href="#">Home</a></li>
+              <li><a href="#about">About</a></li>
+              <li><a href="#contact">Contact</a></li>
+            </ul>
+          </div><!--/.nav-collapse -->
+        </div>
+      </div>
+    </div>
+
+    <div class="container">
+
+      <!-- Main hero unit for a primary marketing message or call to action -->
+      <div class="hero-unit">
+        <h1>Press The Big Blue Button.</h1>
+        <p>Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
+        <p><a class="btn btn-primary btn-large" data-toggle="modal" href="#myModal">Launch The Modal!</a></p>
+      </div>
+
+      <div class="modal" id="myModal" style="display: none">
+        <div class="modal-header">
+          <a class="close" data-dismiss="modal">×</a>
+          <h3>Modal header</h3>
+        </div>
+        <div class="modal-body">
+          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
+
+          <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
+
+          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+
+          <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
+
+          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+
+          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+
+          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+
+          <a id="close-this-shit" href="#">Close this shit</a>
+        </div>
+        <div class="modal-footer">
+          <a href="#" class="btn" data-dismiss="modal">Close</a>
+          <a href="#" class="btn btn-primary">Save changes</a>
+        </div>
+      </div>
+
+      <hr>
+
+      <footer>
+        <p>&copy; Company 2012</p>
+      </footer>
+
+    </div> <!-- /container -->
+
+    <!-- Le javascript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+    <script src="js/bootstrap-modal.js"></script>
+
+    <script type="text/javascript">
+      $(document).ready(function(){
+        $("#close-this-shit").on('click', function(event){
+          console.log($(this).attr('id') + " clicked")
+          $("#myModal").modal('hide');
+        });
+      })
+    </script>
+
+  </body>
+</html>
diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js
@@ -28,7 +28,6 @@
   var Modal = function ( content, options ) {
     this.options = options
     this.$element = $(content)
-      .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
   }
 
   Modal.prototype = {
@@ -130,6 +129,7 @@
         .insertBefore(this.$element)
       this.$elementWrapper = $('<div class="modal-wrapper" />')
         .prependTo(this.$backdrop)
+        .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
       this.$element.remove().prependTo(this.$elementWrapper)
       $('html').css({ 'overflow' : 'hidden'  })
 

diff --git a/less/bootstrap.css b/less/bootstrap.css
@@ -3243,16 +3243,16 @@ input[type="submit"].btn.btn-mini {
   cursor: default;
 }
 .modal-open .dropdown-menu {
-  z-index: 2050;
+  z-index: 2060;
 }
 .modal-open .dropdown.open {
-  *z-index: 2050;
+  *z-index: 2060;
 }
 .modal-open .popover {
-  z-index: 2060;
+  z-index: 2070;
 }
 .modal-open .tooltip {
-  z-index: 2070;
+  z-index: 2080;
 }
 .modal-backdrop {
   overflow-x: hidden;
@@ -3276,15 +3276,15 @@ input[type="submit"].btn.btn-mini {
   top: 50px;
   left: 50%;
   margin-left: -280px;
-  z-index: 1049;
+  z-index: 1050;
   width: 560px;
   position: absolute;
   padding-bottom: 80px;
   overflow: visible;
 }
 .modal {
   margin: 0;
-  z-index: 1050;
+  z-index: 1060;
   overflow: auto;
   width: 560px;
   background-color: #ffffff;

diff --git a/less/modals.less b/less/modals.less
@@ -36,7 +36,7 @@
   top: 50px;
   left: 50%;
   margin-left: -280px;
-  z-index: 1049;
+  z-index: @zindexModalWrapper;
   width: 560px;
   position: absolute;
   padding-bottom: 80px;

diff --git a/less/variables.less b/less/variables.less
@@ -118,7 +118,8 @@
 @zindexTooltip:           1020;
 @zindexFixedNavbar:       1030;
 @zindexModalBackdrop:     1040;
-@zindexModal:             1050;
+@zindexModalWrapper:      1050;
+@zindexModal:             1060;
 
 
 // Sprite icons path