example - Twitter Bootstrap: cómo cerrar modal/popover mediante programación con jQuery

modal bootstrap 4

Question

Estoy usando jquery bootstrap dropdown. Agrego un texto de entrada en el menú desplegable y ahora lo que quiero hacer cuando intento enviarlo, debo cerrar el menú desplegable. ¿Es de alguna manera?

Aquí está la demostración de 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);

Answer 1

Para cerrar el modo de arranque, puede usar ''ocultar'' como opción para el método modal como sigue

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

Por favor, eche un vistazo a violín de trabajo aquí

Answer 2

Sólo un por cierto; También puede activar un botón de cierre al hacer clic en el botón de close modo así:

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

Answer 3

Si buscas esconder la caja modal.

Lo mejor que puedes hacer es

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

Answer 4

para bootstrap modal

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

Para el popover bootstrap

Acabo de ver que estás hablando de un http://twitter.github.com/bootstrap/javascript.html#dropdowns bootstrap no bootstrap:

En este caso, su enfoque no es malo, simplemente elimine la clase abierta del elemento padre. En el ejemplo del enlace anterior, el primer elemento desplegable tiene un ID de "drop3", por lo que para cerrarlo programáticamente puede hacer:

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