title: Twitter-Bootstrap Modal on Modal custom close
body: <p>Using the twitter bootstrap framework for web application. I am using a modal in which I call another modal, having 1 modal on top of the other modal. Currently if you click the close 'x' button it closes both modal windows. I only want to close the top modal.</p>
  
  <p>The Modal class Definition starts on line 750 in bootstrap.js. </p>
  
  <p><strong>Modal HTML</strong></p>
  
  <pre><code>&lt;div class="modal fade hide modal-creator" id="myModal_crop_image" style="display: none;height:600px;" aria-hidden="true"&gt;
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" data-target="#myModal_crop_image"&gt;×&lt;/button&gt;
          &lt;h3&gt;Create New Gallery&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;img style="height:50%;" src="&lt;?php echo base_url(); ?&gt;data/001/images/album/014.jpg" alt="" /&gt;
      &lt;/div&gt;&lt;!-- /modal-body --&gt;
  
      &lt;div class="modal-footer"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>BootStrap JS</strong></p>
  
  <pre><code>!function ($) {
  
    "use strict"; // jshint ;_;
  
  
   /* MODAL CLASS DEFINITION
    * ====================== */
  
    var Modal = function (element, options) {
      this.options = options
      this.$element = $(element)
        .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
      this.options.remote &amp;&amp; this.$element.find('.modal-body').load(this.options.remote)
    }
  
    Modal.prototype = {
  
        constructor: Modal
  
      , toggle: function () {
          return this[!this.isShown ? 'show' : 'hide']()
        }
  
      , show: function () {
          var that = this
            , e = $.Event('show')
  
          this.$element.trigger(e)
  
          if (this.isShown || e.isDefaultPrevented()) return
  
          $('body').addClass('modal-open')
  
          this.isShown = true
  
          this.escape()
  
          this.backdrop(function () {
            var transition = $.support.transition &amp;&amp; that.$element.hasClass('fade')
  
            if (!that.$element.parent().length) {
              that.$element.appendTo(document.body) //don't move modals dom position
            }
  
            that.$element
              .show()
  
            if (transition) {
              that.$element[0].offsetWidth // force reflow
            }
  
            that.$element
              .addClass('in')
              .attr('aria-hidden', false)
              .focus()
  
            that.enforceFocus()
  
            transition ?
              that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :
              that.$element.trigger('shown')
  
          })
        }
  
      , hide: function (e) {
          e &amp;&amp; e.preventDefault()
  
          var that = this
  
          e = $.Event('hide')
  
          this.$element.trigger(e)
  
          if (!this.isShown || e.isDefaultPrevented()) return
  
          this.isShown = false
  
          $('body').removeClass('modal-open')
  
          this.escape()
  
          $(document).off('focusin.modal')
  
          this.$element
            .removeClass('in')
            .attr('aria-hidden', true)
  
          $.support.transition &amp;&amp; this.$element.hasClass('fade') ?
            this.hideWithTransition() :
            this.hideModal()
        }
  
      , enforceFocus: function () {
          var that = this
          $(document).on('focusin.modal', function (e) {
            if (that.$element[0] !== e.target &amp;&amp; !that.$element.has(e.target).length) {
              that.$element.focus()
            }
          })
        }
  
      , escape: function () {
          var that = this
          if (this.isShown &amp;&amp; this.options.keyboard) {
            this.$element.on('keyup.dismiss.modal', function ( e ) {
              e.which == 27 &amp;&amp; that.hide()
            })
          } else if (!this.isShown) {
            this.$element.off('keyup.dismiss.modal')
          }
        }
  
      , hideWithTransition: function () {
          var that = this
            , timeout = setTimeout(function () {
                that.$element.off($.support.transition.end)
                that.hideModal()
              }, 500)
  
          this.$element.one($.support.transition.end, function () {
            clearTimeout(timeout)
            that.hideModal()
          })
        }
  
      , hideModal: function (that) {
          this.$element
            .hide()
            .trigger('hidden')
  
          this.backdrop()
        }
  
      , removeBackdrop: function () {
          this.$backdrop.remove()
          this.$backdrop = null
        }
  
      , backdrop: function (callback) {
          var that = this
            , animate = this.$element.hasClass('fade') ? 'fade' : ''
  
          if (this.isShown &amp;&amp; this.options.backdrop) {
            var doAnimate = $.support.transition &amp;&amp; animate
  
            this.$backdrop = $('&lt;div class="modal-backdrop ' + animate + '" /&gt;')
              .appendTo(document.body)
  
            if (this.options.backdrop != 'static') {
              this.$backdrop.click($.proxy(this.hide, this))
            }
  
            if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
  
            this.$backdrop.addClass('in')
  
            doAnimate ?
              this.$backdrop.one($.support.transition.end, callback) :
              callback()
  
          } else if (!this.isShown &amp;&amp; this.$backdrop) {
            this.$backdrop.removeClass('in')
  
            $.support.transition &amp;&amp; this.$element.hasClass('fade')?
              this.$backdrop.one($.support.transition.end, $.proxy(this.removeBackdrop, this)) :
              this.removeBackdrop()
  
          } else if (callback) {
            callback()
          }
        }
    }
  </code></pre>
  
  <p>Here is a link to the js. <a href="http://jsfiddle.net/dazaweb/5cR95/" rel="nofollow">http://jsfiddle.net/dazaweb/5cR95/</a></p>
  
  <p>Any ideas on how I go about this?</p>