Close Bootstrap Modal

Question

I have a bootstrap modal dialog box that I want to show initially  then when the user clicks on the page  it disappears  I have the following     function             modal   modal toggle         lt div class  modal  id  modal  gt        lt div class  modal-header  gt           lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt    lt  button gt           lt h3 id  myModalLabel  gt Error  lt  h3 gt           lt  div gt           lt div class  modal-body  gt           lt p gt Please correct the following errors  lt  p gt           lt  div gt        lt  div gt    lt  div gt    The modal is displayed initially  but it does not close when clicked outside of the modal  Also  the content area is not greyed out   How can I get the modal to display initially  then close after the user clicks outside the area  And how can I get the background to be grayed out as in the demo

User · Answer

You can see this reference but if this link has been removed, read this description:

Call a modal with id myModal with a single line of JavaScript:

$('#myModal').modal(options)

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".

|-----------|-------------|--------|---------------------------------------------|
| Name      | Type        | Default| Description                                 |
|-----------|-------------|--------|---------------------------------------------|
| backdrop  | boolean or  | true   | Includes a modal-backdrop element.          |
|           | the string  |        | Alternatively, specify static for a         |
|           | 'static'    |        | backdrop which doesn't close the modal      |
|           |             |        | on click.                                   |
|           |             |        |                                             |
| keyboard  | boolean     | true   | Closes the modal when escape key is pressed.|   
|           |             |        |                                             |
| focus     | boolean     | true   | Puts the focus on the modal when initialized|       
|           |             |        |                                             |
| show      | boolean     | true   | Shows the modal when initialized.           |
|-----------|-------------|--------|---------------------------------------------|

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

.modal(options)

Activates your content as a modal. Accepts an optional options object.

$('#myModal').modal({
   keyboard: false
})

.modal('toggle')

Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal or hidden.bs.modal event occurs).

$('#myModal').modal('toggle')

.modal('show')

Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs).

$('#myModal').modal('show')

.modal('hide')

Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.bs.modal event occurs).

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

.modal('handleUpdate')

Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).

$('#myModal').modal('handleUpdate')

.modal('dispose')

Destroys an element’s modal.

Events

Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the **). Type Description

|----------------|--------------------------------------------------------------|
| Event Type     | Description                                                  |
|----------------|--------------------------------------------------------------|
| show.bs.modal  | This event fires immediately when the **show** instance      |
|                | method is called. If caused by a click, the clicked element  |
|                | is available as the **relatedTarget** property of the event. | 
|                |                                                              |
| shown.bs.modal | This event is fired when the modal has been made visible to  |
|                | the user (will wait for CSS transitions to complete). If     |
|                | caused by a click, the clicked element is available as the   | 
|                | **relatedTarget** property of the event.                     |
|                |                                                              |
| hide.bs.modal  | This event is fired immediately when the **hide** instance   |
|                | method has been called.                                      |
|                |                                                              |
| hidden.bs.modal| This event is fired when the modal has finished being hidden |
|                | from the user (will wait for CSS transitions to complete).   |
|----------------|--------------------------------------------------------------|

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

User · Answer

In my case  main page from where bootstrap modal was triggered started to not responding after using     modal   modal  toggle    way  but started responding in the following way       submitBtn   on  click  function          submitBtn   attr  data-dismiss   modal

User · Answer

Just add this in modal div tabindex  quot -1 quot

User · Answer

Another way of doing this is that first you remove the class modal-open  which closes the modal  Then you remove the class modal-backdrop that removes the grayish cover of the modal    Following code can be used      body   removeClass  modal-open       modal-backdrop   remove

User · Answer

your-modal-id   modal  hide      Running this call via class      my-modal    won t work

User · Answer

Try This      modal id   modal  hide

User · Answer

modal   modal  toggle       or       modal   modal   hide      should work   But if nothing else works you can call the modal close button directly       modal  close   click

User · Answer

In some circumstances typing error could be the culprit  For instance  make sure you have   data-dismiss  modal    and not   data-dissmiss  modal    Notice the double  ss  in the second example that will cause the Close button that fail

User · Answer

We can close the modal pop-up in the following ways      We use data-dismiss property of modal-up in html to close the modal-up such as   lt div class  modal-footer  gt  lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt  lt  div gt       We can close the modal pop-up through java script  such as    lt div class  modal fade pageModal   id  openModal  tabindex  -1  data-keyboard  false  data-backdrop  static  gt           openModal   modal  hide      Using modal pop-up Id          pageModal   modal  hide      Using class that is defined in modal html

User · Answer

This code worked perfectly for me to close a modal  i m using bootstrap 3 3       myModal   removeClass  in

User · Answer

In my case  I used a button to show the modal    lt button type  button  class  btn btn-success  style  color white      data-toggle  modal  data-target   my-modal-to-show   gt       lt i class  fas fa-plus  gt  lt  i gt  Call MODAL  lt  button gt    So in my code  to close the modal  that has the id    my-modal-to-show   I call that function  in Angular typescript    closeById modalId  string        modalId  modal  toggle        modalId     close   click        If I call   modalId  modal  hide   it does t work and I don t know why  PS   in my modal I coded that button element with  close class too    lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt        lt span aria-hidden  true  gt  amp times  lt  span gt   lt  button gt

User · Answer

After some test  I found that for bootstrap modal need to wait for some time before executing the    modal  modal  hide   after executing     modal  modal  show    And i found in my case i need at least 500 milisecond interval between the two   So this is my test case and solution       modal-loading   modal  show    setTimeout function           modal-loading   modal  hide       500

User · Answer

this one is pretty good and it also works in angular 2       modal  close   click

User · Answer

function Delete           var id       dgetid   val           debugger          ajax              type   POST              url   Add NewProduct aspx DeleteData              data    id      id                    datatype   json              contentType   application json  charset utf-8              success  function  result                   if  result d    1                       bindData                       setTimeout function        DeleteModal   modal  hide     1000

User · Answer

modal in   modal  hide     use the above code to hide the backdrop of modal if you are using multiple modal pop in one page

User · Answer

you can use               modal show   attr  id    modal  hide

User · Answer

This works well    function             modal   modal  toggle          However  when you have multiple modals stacking on top one another it is not effective  so instead   this works  data-dismiss  modal

User · Answer

some times the solution up doesn t work so you d have properly to remove the in class and add the css display none manually        modal   removeClass  in        modal   css  display   none

User · Answer

My five cents on this one is that I don t want to have to target the bootstrap modal with an id and seeing as there should be only one modal at a time the following should be quite sufficient to remove the modal as toggle could be dangerous       modal   removeClass  show

User · Answer

x000D   x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D     lt title gt Bootstrap Example lt  title gt  x000D     lt meta charset  utf-8  gt  x000D     lt meta name  viewport  content  width device-width  initial-scale 1  gt  x000D     lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D     lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   lt script gt  x000D    window  load function    x000D            myModal   modal  show    x000D      x000D    function      x000D         modal   modal  toggle    x000D      x000D   lt  script gt  x000D   lt  head gt  x000D   lt body gt  x000D   x000D   lt div class  container  gt  x000D     lt h2 gt Modal Example lt  h2 gt  x000D     lt  -- Trigger the modal with a button -- gt  x000D     lt button type  button  class  btn btn-info btn-lg  data-toggle  modal  data-target   myModal  gt Open Modal lt  button gt  x000D   x000D     lt  -- Modal -- gt  x000D     lt div class  modal fade  id  myModal  role  dialog  gt  x000D       lt div class  modal-dialog  gt  x000D       x000D         lt  -- Modal content-- gt  x000D         lt div class  modal-content  gt  x000D           lt div class  modal-header  gt  x000D             lt button type  button  class  close  data-dismiss  modal  gt  amp times  lt  button gt  x000D             lt h4 class  modal-title  gt Modal Header lt  h4 gt  x000D           lt  div gt  x000D           lt div class  modal-body  gt  x000D             lt p gt Some text in the modal  lt  p gt  x000D           lt  div gt  x000D           lt div class  modal-footer  gt  x000D             lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt  x000D           lt  div gt  x000D         lt  div gt  x000D         x000D       lt  div gt  x000D     lt  div gt  x000D     x000D   lt  div gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Besides  you can  click  on a  x   that closes dialog  E g        ui-dialog-titlebar-close   click

User · Answer

I closed modal Programmatically with this trick   Add a button in modal with data-dismiss  modal  and hide the button with display  none  Here is how it will look like   lt div class  modal fade  id  addNewPaymentMethod  role  dialog  gt     lt div class  modal-dialog  gt                     lt button type  button  id  close-modal  data-dismiss  modal  style  display  none  gt Close lt  button gt     lt  div gt   lt  div gt    Now when you want to close modal Programmatically just trigger a click event on that button  which is not visible to user  In Javascript you can trigger click on that button like this   document getElementById  close-modal   click

User · Answer

to close bootstrap modal you can pass  hide  as option to modal method as follow      modal   modal  hide      Please take a look at working fiddle here  bootstrap also provide events that you can hook into modal functionality  like if you want to fire a event when the modal has finished being hidden from the user you can use hidden bs modal event you can read more about modal methods and events here in Documentation  If none of the above method work  give a id to your close button and trigger click on close button

User · Answer

Using  modal hide would only hide the modal  If you are using overlay underneath the modal  it would still be there  use click call to actually close the modal and remove the overlay       modalID  close   click

User · Answer

this worked for me    lt span class  button  data-dismiss  modal  aria-label  Close  gt cancel lt  span gt    use this link modal close

User · Answer

Put modal  toggle   instead of modal toggle     function             modal   modal  toggle

[jquery] Close Bootstrap Modal

Examples related to jquery

Examples related to twitter-bootstrap

[jquery] Close Bootstrap Modal

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to modal-dialog