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

Question

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); 

Answer 1

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"); 

Answer 2

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