Twitter Bootstrap：如何使用 jQuery 以编程方式关闭模态/弹出框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12970207/
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: How to close modal / popover programmatically with jQuery
提问by Naga Botak
I am using jquery bootstrap dropdown. I add some input text in dropdown and now what I want to do when I try to submit, it must close the dropdown. Is it any way ?
我正在使用 jquery bootstrap 下拉菜单。我在下拉列表中添加了一些输入文本，现在我尝试提交时想要做什么，它必须关闭下拉列表。有什么办法吗？
Here it's the demo of url from twitter bootstrap : http://twitter.github.com/bootstrap/javascript.html#dropdowns
这是来自 twitter bootstrap 的 url 演示：http: //twitter.github.com/bootstrap/javascript.html#dropdowns
!function ($) {
var toggle = '[data-toggle=dropdown]'
, Dropdown = function (element) {
var $el = $(element).on('click.dropdown.data-api', this.toggle)
$('html').on('click.dropdown.data-api', function () {
$el.parent().removeClass('open')
})
}
Dropdown.prototype = {
constructor: Dropdown
, toggle: function (e) {
var $this = $(this)
, $parent
, isActive
if ($this.is('.disabled, :disabled')) return
$parent = getParent($this)
isActive = $parent.hasClass('open')
clearMenus()
if (!isActive) {
$parent.toggleClass('open')
$this.focus()
}
return false
}
, keydown: function (e) {
var $this
, $items
, $active
, $parent
, isActive
, index
if (!/(38|40|27)/.test(e.keyCode)) return
$this = $(this)
e.preventDefault()
e.stopPropagation()
if ($this.is('.disabled, :disabled')) return
$parent = getParent($this)
isActive = $parent.hasClass('open')
if (!isActive || (isActive && e.keyCode == 27)) return $this.click()
$items = $('[role=menu] li:not(.divider) a', $parent)
if (!$items.length) return
index = $items.index($items.filter(':focus'))
if (e.keyCode == 38 && index > 0) index-- // up
if (e.keyCode == 40 && index < $items.length - 1) index++ // down
if (!~index) index = 0
$items
.eq(index)
.focus()
}
}
function clearMenus() {
getParent($(toggle))
.removeClass('open')
}
function getParent($this) {
var selector = $this.attr('data-target')
, $parent
if (!selector) {
selector = $this.attr('href')
selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
$parent = $(selector)
$parent.length || ($parent = $this.parent())
return $parent
}
$.fn.dropdown = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('dropdown')
if (!data) $this.data('dropdown', (data = new Dropdown(this)))
if (typeof option == 'string') data[option].call($this)
})
}
$.fn.dropdown.Constructor = Dropdown
$(function () {
$('html')
.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
$('body')
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
})
}(window.jQuery);
回答by tmaximini
for bootstrap modal
用于引导模式
Try $('#myModal').modal('hide')
尝试 $('#myModal').modal('hide')
For bootstrap popover
用于引导弹出窗口
I just saw you are talking about a bootstrap dropdownnot bootstrap modal:
我刚刚看到您在谈论引导程序下拉菜单而不是引导程序模式：
In this case your approach is not bad, just remove the open class of the parent element. In the example from the link above the first dropdown element has an id of "drop3", so to programatically close it you can do:
在这种情况下，您的方法还不错，只需删除父元素的开放类即可。在上面链接的示例中，第一个下拉元素的 id 为“drop3”，因此要以编程方式关闭它，您可以执行以下操作：
$('#drop3').parent().removeClass("open");
回答by Subodh Ghulaxe
To close bootstrap modalyou can use 'hide'as option to modal method as follow
要关闭引导模式，您可以使用“隐藏”作为模态方法的选项，如下所示
$('#modal').modal('hide');
Please take a look at working fiddle here
回答by Bhoj Raj Bhatta
If you are looking for hiding the modal box.
如果您正在寻找隐藏模式框。
The best you can do is
你能做的最好的是
$('#myModal').modal("hide");
回答by William
Just a by the way; you can also trigger a close button click on the modal's closebutton like so:
顺便说一句；您还可以触发关闭按钮单击模态close按钮，如下所示：
$('.close').click();
UPDATE
更新
The above method may have been a bit hacky, so your better off using the default Bootstrap modal method
上面的方法可能有点老套，所以最好使用默认的 Bootstrap 模态方法
$('#modal-id').modal('hide');
