Jquery 基于模式自定义关闭的Twitter引导模式

为web应用程序使用twitter引导框架。我使用的是一个模态，我调用另一个模态，在另一个模态之上有一个模态。当前，如果单击关闭“x”按钮，将关闭两个模式窗口。我只想关闭顶部模式

模态类定义从bootstrap.js中的第750行开始

模式HTML

<div class="modal fade hide modal-creator" id="myModal_crop_image" style="display: none;height:600px;" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" data-target="#myModal_crop_image">×</button>
        <h3>Create New Gallery</h3>
    </div>
    <div class="modal-body">
        <img style="height:50%;" src="<?php echo base_url(); ?>data/001/images/album/014.jpg" alt="" />
    </div><!-- /modal-body -->

    <div class="modal-footer">

</div>

×
创建新库
data/001/images/album/014.jpg“alt=”“/>

引导JS

!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 && 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 && 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 && 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 && 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 && !that.$element.has(e.target).length) {
            that.$element.focus()
          }
        })
      }

    , escape: function () {
        var that = this
        if (this.isShown && this.options.keyboard) {
          this.$element.on('keyup.dismiss.modal', function ( e ) {
            e.which == 27 && 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 && this.options.backdrop) {
          var doAnimate = $.support.transition && animate

          this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
            .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 && this.$backdrop) {
          this.$backdrop.removeClass('in')

          $.support.transition && this.$element.hasClass('fade')?
            this.$backdrop.one($.support.transition.end, $.proxy(this.removeBackdrop, this)) :
            this.removeBackdrop()

        } else if (callback) {
          callback()
        }
      }
  }

！函数（$）{
“使用严格”；/jshint；\ux；
/*模态类定义
* ====================== */
var模态=功能（元素、选项）{
this.options=选项
此.$element=$（element）
.delegate（'[data dismise=“modal”]'，'click.dismise.modal'，$.proxy（this.hide，this））
this.options.remote&&this.element.find（'.modal body'）.load（this.options.remote）
}
Modal.prototype={
构造函数：Modal
，切换：函数（）{
返回此[！this.isShown？'show'：'hide']（）
}
，show:function（）{
var=this
，e=$。事件（'显示'）
此.$element.trigger（e）
如果（this.isShown | e.isDefaultPrevented（））返回
$（'body'）.addClass（'modal-open'））
this.isShown=true
这个
这个.背景（函数（）{
var transition=$.support.transition&&that.$element.hasClass（'fade'））
如果（！that.$element.parent（）.length）{
that.$element.appendTo（document.body）//不要将modals移动到dom位置
}
那.$元素
.show（）
如果（过渡）{
该.$element[0]。偏移网络宽度//强制回流
}
那.$元素
.addClass（'in'）
.attr（'aria-hidden'，false）
.focus（）
那就是。enforceFocus（）
过渡？
that.$element.one（$.support.transition.end，函数（）{that.$element.trigger（'show'）}）：
该.$element.trigger（'显示'）
})
}
，隐藏：函数（e）{
e&e.preventDefault（）
var=this
e=$.Event（'hide'）
此.$element.trigger（e）
如果（！this.isShown | e.isDefaultPrevented（））返回
this.isShown=false
$（'body'）.removeClass（'modal-open'））
这个
$（document.off（'focusin.model'））
这是$element
.removeClass（'in'）
.attr（'aria-hidden'，true）
$.support.transition&&this.$element.hasClass（'fade'）？
this.hideWithTransition（）：
this.hideModal（）
}
，enforceFocus:function（）{
var=this
$（文档）.on（'focusin.modal'，函数（e）{
如果（that.$element[0]！==e.target&&！that.$element.has（e.target.length）{
那.$element.focus（）
}
})
}
，escape:function（）{
var=this
if（this.isShown&&this.options.keyboard）{
此.$element.on（'keyup.dismission.modal'，函数（e）{
e、 which==27&&that.hide（）
})
}否则如果（！this.isShown）{
此.$element.off（'keyup.disclose.modal'））
}
}
，hideWithTransition:函数（）{
var=this
，timeout=setTimeout（函数（）{
.element.off（$.support.transition.end）
那就是
}, 500)
此.$element.one（$.support.transition.end，函数（）{
clearTimeout（超时）
那就是
})
}
，hideModal:函数（that）{
这是$element
.hide（）
.trigger（'隐藏'）
这个背景()
}
，RemoveBackground:函数（）{
此.$background.remove（）
此值为。$background=null
}
，背景：函数（回调）{
var=this
，animate=this.$element.hasClass（'fade'）？'fade'：''
if（this.isShown&&this.options.background）{
var doAnimate=$.support.transition&&animate
此.$background=$（''）
.appendTo（document.body）
如果（this.options.background！=“静态”）{
此.$background。单击（$.proxy（this.hide，this））
}
if（doAnimate）this.$background[0].offsetWidth//强制回流
此.$background.addClass（'in'））
多安美特？
此.background.one（$.support.transition.end，回调）：
回调函数（）
}如果（！this.isShown&&this.background）为else，则为{
此.$background.removeClass（'in'））
$.support.transition&&this.$element.hasClass（'fade'）？
this.$background.one（$.support.transition.end，$.proxy（this.removecardbackground，this））：
this.removeBackup（）
}else if（回调）{
回调函数（）
}
}
}

这里有一个到js的链接

---

有什么想法吗？

在您的模态定义中，您有

data dismission=“modal”

，添加

data target=“#theidofthemethodal”

这将告诉它仅关闭该特定模式

我创建了一个小提琴来演示这一点，它实际上可以在有或没有数据目标的情况下工作：

---

在您的模态定义中，您有

data dismission=“modal”

，添加

data target=“#theidofthemethodal”

这将告诉它仅关闭该特定模式

我创建了一个小提琴来演示这一点，它实际上可以在有或没有数据目标的情况下工作：

添加到模式隐藏方法（最上面的行）

这将停止对家长和其他孩子的冒泡活动

另外，在escape方法中传递

hide（）

（使其成为

hide（e）

）中的事件参数。

添加到模式隐藏方法（最上面的行）

这将停止对家长和其他孩子的冒泡活动

另外，在

hide（）

中传递事件参数（使其成为

hid
e & e.stopPropogation();

$(document).on('click', 'button:button.close_modal', function ( event ) {
  event.preventDefault();
  var $this = $(event.currentTarget);
  var modalId = $this.closest('div.modal').attr('id');
  $('#'+modalId+'').modal('hide');
});

$('#myModal .close').click();