使用twitter bootstrap框架进行Web应用程序。我正在使用一个模态,其中我称之为另一个模态,在另一个模态上有1个模态。目前,如果单击关闭“x”按钮,它将关闭两个模态窗口。我只想关闭顶级模态。
Modal类定义从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>
BootStrap 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()
}
}
}
这是js的链接。 http://jsfiddle.net/dazaweb/5cR95/
关于我如何解决这个问题的任何想法?
答案 0 :(得分:1)
在您拥有data-dismiss="modal"
的模态定义中,添加data-target="#theIdOfTheModal"
这将告诉它只关闭那个特定的模态
我创建了一个演示这个的小提琴,它实际上有或没有数据目标: Fiddle!
答案 1 :(得分:1)
添加到模态隐藏方法(最顶层的行)
e & e.stopPropogation();
这将阻止冒泡活动给父母和其他孩子。
另外,在hide()
中传递事件参数(以便它变为hide(e)
)在escape方法中。
答案 2 :(得分:1)
使用Javascript:
$(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');
});
答案 3 :(得分:0)
替代
$('#myModal .close').click();