Twitter Bootstrap：如何使用jQuery编程关闭模态/弹出窗口

Question

Twitter Bootstrap：如何使用jQuery编程关闭模态/弹出窗口

57

我正在使用jquery bootstrap下拉菜单。我在下拉菜单中添加了一些输入文本，现在当我尝试提交时，它必须关闭下拉菜单。有什么方法吗？

这里是twitter bootstrap的演示网址： 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);

- Naga Botak

3个回答

23

要关闭bootstrap 模态框，您可以使用以下方法将'hide'选项传递给modal函数：

 $('#modal').modal('hide');

请查看这个工作的fiddle，点击此处。

- Subodh Ghulaxe

2

顺便提一下，你也可以通过触发模态框的 close 按钮来关闭它：

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

更新

上述方法可能有些巧妙，因此最好使用默认的Bootstrap模态框方法。

$('#modal-id').modal('hide');

- William

推荐使用框架的本地方法。 - emamut

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tmaximini · Accepted Answer

关于Bootstrap模态框

尝试使用 $('#myModal').modal('hide') 命令来关闭模态框。

关于Bootstrap弹窗

我看到你提到了Bootstrap下拉菜单，而不是Bootstrap模态框：

在这种情况下，你的方法并不差，只需移除父元素的“open”类即可。例如，如果链接的ID为“drop3”，那么你可以采用以下方式来通过编程实现关闭：

$('#drop3').parent().removeClass("open");