initial idea for handling closing of modals from whatever element you want with .js-dismiss class

docs/index.html

@@ -1644,7 +1644,7 @@
         <!-- Modal -->
         <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
           <div class="modal-header">
-            <a href="#" class="close">&times;</a>
+            <a href="#" class="close js-dismiss">&times;</a>
             <h3>Modal Heading</h3>
           </div>
           <div class="modal-body">
@@ -1652,7 +1652,7 @@
           </div>
           <div class="modal-footer">
             <a href="#" class="btn primary">Primary</a>
-            <a href="#" class="btn secondary">Secondary</a>
+            <a href="#" class="btn">Secondary</a>
           </div>
         </div>
       </div>

docs/javascript.html

@@ -182,15 +182,15 @@ $('#my-modal').bind('hidden', function () {
           <!-- sample modal content -->
           <div id="modal-from-dom" class="modal hide fade">
             <div class="modal-header">
-              <a href="#" class="close">&times;</a>
+              <a href="#" class="close js-dismiss">&times;</a>
               <h3>Modal Heading</h3>
             </div>
             <div class="modal-body">
               <p>One fine body…</p>
             </div>
             <div class="modal-footer">
-              <a href="#" class="btn primary">Primary</a>
-              <a href="#" class="btn secondary">Secondary</a>
+              <a href="#" class="btn primary">Save changes</a>
+              <a href="#" class="btn js-dismiss">Close</a>
             </div>
           </div>
 

js/bootstrap-modal.js

@@ -55,7 +55,7 @@
   var Modal = function ( content, options ) {
     this.settings = $.extend({}, $.fn.modal.defaults)
     this.$element = $(content)
-      .delegate('.close', 'click.modal', $.proxy(this.hide, this))
+      .delegate('.js-dismiss', 'click.modal', $.proxy(this.hide, this))
 
     if ( options ) {
       $.extend( this.settings, options )