Twitter Bootstrap: How to close modal / popover programmatically with jQuery

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 ?

Here it's the demo of url from 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);

for bootstrap modal

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

For bootstrap popover

I just saw you are talking about a bootstrap dropdown not 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:

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

To close bootstrap modal you can use 'hide' as option to modal method as follow

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

Please take a look at working fiddle here

Just a by the way; you can also trigger a close button click on the modal's close button like so:

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

UPDATE

The above method may have been a bit hacky, so your better off using the default Bootstrap modal method

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