Twitter-Bootstrap Modal on Modal 自定义关闭
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13651599/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter-Bootstrap Modal on Modal custom close
提问by SuperNinja
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.
将 twitter 引导框架用于 Web 应用程序。我正在使用一个模态，我在其中调用另一个模态，在另一个模态之上有 1 个模态。目前，如果您单击关闭“x”按钮，它会关闭两个模态窗口。我只想关闭顶部模态。
The Modal class Definition starts on line 750 in bootstrap.js.
Modal 类定义从 bootstrap.js 的第 750 行开始。
Modal HTML
模态 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
引导程序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()
}
}
}
Here is a link to the js. http://jsfiddle.net/dazaweb/5cR95/
这是 js 的链接。http://jsfiddle.net/dazaweb/5cR95/
Any ideas on how I go about this?
关于我如何解决这个问题的任何想法？
采纳答案by James Kleeh
In your modal definition where you have data-dismiss="modal", add data-target="#theIdOfTheModal"
在您拥有的模态定义中data-dismiss="modal"，添加data-target="#theIdOfTheModal"
This will tell it to only close that specific modal
这将告诉它只关闭特定的模式
I created a fiddle demonstrating this and it actually works with or without data-target: Fiddle!
我创建了一个小提琴来演示这一点，它实际上可以使用或不使用数据目标： 小提琴！
回答by leximus
Add to modal hide method (top most line)
添加到模态隐藏方法（最上面的一行）
e & e.stopPropogation();
This will stop from bubbling event to parents and rest of children.
这将停止对父母和其他孩子的冒泡事件。
Also, pass event param in hide()(so that it becomes hide(e)) inside escape method.
此外，在转义方法中传递事件参数hide()（使其变为hide(e)）。
回答by tofarias
- In cancel and close button remove this: data-dismiss="modal";
- Then add a class, for example: "close_modal";
- In javascript create a delegate function like below:
- 在取消和关闭按钮中删除这个： data-dismiss="modal";
- 然后添加一个类，例如：“close_modal”；
- 在javascript中创建一个如下所示的委托函数：
Javascript:
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');
});
