web-dev-qa-db-fra.com

Twitter Bootstrap: comment fermer par programmation modal/popover avec jQuery

J'utilise jQuery bootstrap dropdown. J'ajoute du texte d'entrée dans la liste déroulante et maintenant, ce que je veux faire lorsque j'essaie de la soumettre, doit fermer la liste. Est-ce un moyen?

Voici la démo de l'URL de 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);
jquerytwitter-bootstrap
43
Naga Botak

pour bootstrap modal

Essayez $('#myModal').modal('hide') 

Pour le popover bootstrap

Je viens de voir que vous parlez d'un bootstrap dropdown not bootstrap modal:

Dans ce cas, votre approche n'est pas mauvaise, supprimez simplement la classe ouverte de l'élément parent . Dans l'exemple du lien situé au-dessus du premier élément déroulant, l'id de "drop3", Afin de le fermer par programmation vous peut faire:

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

Pour fermer bootstrap modal vous pouvez utiliser 'cacher' comme option de la méthode modale comme suit

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

S'il vous plaît jeter un oeil à travailler fiddle ici

15
Subodh Ghulaxe

Si vous cherchez à cacher la boîte modale.

Le mieux que vous puissiez faire est

     $('#myModal').modal("hide");
11
Bhoj Raj Bhatta

Juste un à propos; vous pouvez également déclencher un bouton de fermeture en cliquant sur le bouton close du modal comme suit:

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