Bootstrap modal - close modal when call to action button is clicked

Question

I have a external link inside my modal  and I want the modal to hide after the user has clicked on the link  How do I do that  Here is my code   lt div class  quot modal hide fade quot  id  quot modalwindow quot  gt     lt div class  quot modal-header quot  gt       lt button type  quot button quot  class  quot close quot  data-dismiss  quot modal quot  aria-hidden  quot true quot  gt  amp times  lt  button gt       lt h3 gt Title lt  h3 gt     lt  div gt     lt div class  quot modal-body quot  gt       lt p gt You need to do a search on google com for that  lt  p gt     lt  div gt     lt div class  quot modal-footer quot  gt       lt a id  quot closemodal quot  href  quot https   www google com quot  class  quot btn btn-primary quot  target  quot  blank quot  gt Launch google com lt  a gt     lt  div gt   lt  div gt    lt script type  quot text javascript quot  gt          closemodal   modal  hide     lt  script gt

User · Answer

Remove your script  and change the HTML    lt a id  closemodal  href  https   www google com  class  btn btn-primary close  data-dismiss  modal  target   blank  gt Launch google com lt  a gt    EDIT  Please note that currently this will not work as this functionality does not yet exist in bootstrap  See issue here

User · Answer

You need to bind the modal hide call to the onclick event  Assuming you are using jQuery you can do that with      closemodal   click function             modalwindow   modal  hide         Also make sure the click event is bound after the document has finished loading    function           Place the above code inside this block     enter code here

User · Answer

I tried closing a modal window with a bootstrap CSS loaded  The close    method does not really close the modal window  So I added the display style to  quot none quot       function closeDialog             let d   document getElementById  d           d style display    quot none quot          d close          The HTML code includes a button into the dialog window   lt input type  quot submit quot  value  quot Confirm quot  onclick  quot closeDialog   quot   gt

User · Answer

Use data-dismiss  modal     In the version of Bootstrap I am using v3 3 5   when  data-dismiss  modal  is added to the desired button like shown below it calls my external Javascript  JQuery  function beautifully and magically closes the modal  Its soo Sweet  I was worried I would have to call some modal hide in another function and chain that to the real working function    lt a href     id  btnReleaseAll  class  btn btn-primary btn-default btn-small margin-right pull-right  data-dismiss  modal  gt Yes lt  a gt    In some external script file  and in my doc ready there is of course a function for the click of that identifier ID          divExamListHeader   on  click     btnReleaseAll   function                        Do DatabaseMagic Here for a call a MVC ActionResult

User · Answer

Make as shown    x000D   x000D      document  ready function    x000D          myModal   modal  show    x000D   x000D          myBtn   on  click   function    x000D            myModal   modal  show    x000D          x000D       x000D        x000D   lt br  gt  x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  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 3 3 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  head gt  x000D   lt body gt  x000D   x000D   lt div class  container  gt  x000D     lt h2 gt Activate Modal with JavaScript lt  h2 gt  x000D     lt  -- Trigger the modal with a button -- gt  x000D     lt button type  button  class  btn btn-info btn-lg  id  myBtn  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   x000D         lt  div gt  x000D         x000D       lt  div gt  x000D     lt  div gt  x000D     x000D   lt  div gt  x000D   x000D   x000D

[javascript] Bootstrap modal - close modal when "call to action" button is clicked

Examples related to javascript

Examples related to twitter-bootstrap