Overhaul modal to make it responsive and not super lame

docs/assets/css/bootstrap.css

@@ -3720,34 +3720,35 @@ button.close {
   background-color: #fff;
 }
 
-.modal-backdrop {
+.modal-open {
+  overflow: hidden;
+}
+
+.modal {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1040;
-  background-color: #000;
-}
-
-.modal-backdrop.fade {
-  opacity: 0;
-}
-
-.modal-backdrop,
-.modal-backdrop.fade.in {
-  opacity: 0.8;
-  filter: alpha(opacity=80);
-}
-
-.modal {
-  position: fixed;
-  top: 10%;
-  left: 50%;
-  z-index: 1050;
   display: none;
-  width: 560px;
-  margin-left: -280px;
+  overflow: auto;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+
+.modal-dialog {
+  position: relative;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1050;
+  width: auto;
+  padding: 10px;
+}
+
+.modal-content {
+  position: relative;
   background-color: #fff;
   border: 1px solid #999;
   border: 1px solid rgba(0, 0, 0, 0.3);
@@ -3760,7 +3761,7 @@ button.close {
           background-clip: padding-box;
 }
 
-.modal.fade {
+.modal-content.fade {
   top: -25%;
   -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
      -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
@@ -3768,44 +3769,54 @@ button.close {
           transition: opacity 0.3s linear, top 0.3s ease-out;
 }
 
-.modal.fade.in {
+.modal-content.fade.in {
   top: 10%;
 }
 
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1030;
+  background-color: #fff;
+}
+
+.modal-backdrop.fade {
+  opacity: 0;
+}
+
+.modal-backdrop,
+.modal-backdrop.fade.in {
+  opacity: 0.75;
+  filter: alpha(opacity=75);
+}
+
 .modal-header {
   padding: 9px 15px;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid #e5e5e5;
 }
 
 .modal-header .close {
   margin-top: 2px;
 }
 
-.modal-header h3 {
+.modal-title {
   margin: 0;
   line-height: 30px;
 }
 
 .modal-body {
   position: relative;
-  max-height: 400px;
   padding: 15px;
-  overflow-y: auto;
-}
-
-.modal-form {
-  margin-bottom: 0;
 }
 
 .modal-footer {
   padding: 14px 15px 15px;
-  margin-bottom: 0;
+  margin-top: 15px;
   text-align: right;
-  background-color: #f5f5f5;
-  border-top: 1px solid #ddd;
-  border-radius: 0 0 6px 6px;
-  -webkit-box-shadow: inset 0 1px 0 #ffffff;
-          box-shadow: inset 0 1px 0 #ffffff;
+  border-top: 1px solid #e5e5e5;
 }
 
 .modal-footer:before,
@@ -3831,6 +3842,17 @@ button.close {
   margin-left: 0;
 }
 
+@media screen and (min-width: 768px) {
+  .modal-dialog {
+    right: auto;
+    left: 50%;
+    width: 560px;
+    padding-top: 30px;
+    padding-bottom: 30px;
+    margin-left: -280px;
+  }
+}
+
 .tooltip {
   position: absolute;
   z-index: 1030;

docs/assets/js/bootstrap-modal.js

@@ -239,6 +239,10 @@
       .one('hide', function () {
         $this.focus()
       })
-  })
+    })
+
+    var $body = $('body')
+      .on('shown', '.modal', function () { $body.addClass('modal-open') })
+      .on('hidden', '.modal', function () { $body.removeClass('modal-open') })
 
 }(window.jQuery);

docs/assets/js/bootstrap.js

@@ -1037,7 +1037,11 @@
       .one('hide', function () {
         $this.focus()
       })
-  })
+    })
+
+    var $body = $('body')
+      .on('shown', '.modal', function () { $body.addClass('modal-open') })
+      .on('hidden', '.modal', function () { $body.removeClass('modal-open') })
 
 }(window.jQuery);
 /* ===========================================================