How to open a Bootstrap modal window using jQuery

Question

I m using Twitter Bootstrap modal window functionality  When someone clicks submit on my form  I want to show the modal window upon clicking the  submit button  in the form    lt form id  myform  class  form-wizard  gt       lt h2 class  form-wizard-heading  gt BootStap Wizard Form lt  h2 gt       lt input type  text  value     gt       lt input type  submit   gt   lt  form gt    lt  -- Modal -- gt   lt div id  myModal  class  modal hide fade  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  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 Modal header lt  h3 gt       lt  div gt       lt div class  modal-body  gt           lt p gt One fine body    lt  p gt       lt  div gt       lt div class  modal-footer  gt           lt button class  btn  data-dismiss  modal  aria-hidden  true  gt Close lt  button gt           lt button class  btn btn-primary  gt Save changes lt  button gt       lt  div gt   lt  div gt    jQuery       myform   on  submit   function ev            my-modal   modal           show   false                 var data     this  serializeObject        json data   JSON stringify data           results   text json data            modal-body   text json data                results   text data        ev preventDefault

User · Answer

Try this  It s works for me well   x000D   x000D  function clicked item             alert   item  attr  id               x000D   lt link href  https   cdnjs cloudflare com ajax libs bootstrap-rtl 3 4 0 css bootstrap-rtl css  rel  stylesheet   gt   lt script src  https   cdnjs cloudflare com ajax libs jquery 2 1 3 jquery min js  gt  lt  script gt    lt button onclick  clicked this    id  modalME  gt Click me lt  button gt    lt  -- Modal -- gt     lt div class  modal  id  modalME  aria-hidden  true  gt       lt div class  modal-dialog  gt         lt div class  modal-header  gt           lt h2 gt Modal in CSS lt  h2 gt           lt a href   close  class  btn-close  aria-hidden  true  gt    lt  a gt   lt  --CHANGED TO   close -- gt         lt  div gt         lt div class  modal-body  gt           lt p gt One modal example here  lt  p gt         lt  div gt         lt div class  modal-footer  gt           lt a href   close  class  btn  gt Nice  lt  a gt    lt  --CHANGED TO   close -- gt         lt  div gt         lt  div gt       lt  div gt     lt  div gt     lt  --  Modal -- gt  x000D   x000D   x000D

User · Answer

Try      myModal   modal  toggle     To open or close the modal with id myModal   If the above is not working then it means bootstrap js has been overridden by some other js file  Here is a solution  1 - Move bootstrap js to the bottom so that it will override other js files   2 - Make sure the order is like below   lt script src  plugins jQuery jquery-2 2 3 min js  gt  lt  script gt   lt  -- Other js files -- gt   lt script src  plugins jQuery bootstrap min js  gt  lt  script gt

User · Answer

lt form id  myform  class  form-wizard  gt       lt h2 class  form-wizard-heading  gt BootStap Wizard Form lt  h2 gt       lt input type  text  value     gt       lt input type  submit  id  submitButton   gt   lt  form gt    lt  -- Modal -- gt   lt div id  myModal  class  modal hide fade  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  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 Modal header lt  h3 gt       lt  div gt       lt div class  modal-body  gt           lt p gt One fine body    lt  p gt       lt  div gt       lt div class  modal-footer  gt           lt button class  btn  data-dismiss  modal  aria-hidden  true  gt Close lt  button gt           lt button class  btn btn-primary  gt Save changes lt  button gt       lt  div gt   lt  div gt    You can launch the modal with the code below this     document  ready function            submitButton   click function                myModal   modal

User · Answer

I tried several methods which failed  but the below worked for me like a charm       myModal   appendTo  body   modal  show

User · Answer

In addition you can use via data attribute   lt button type  button  data-toggle  modal  data-target   myModal  gt Launch modal lt  button gt    In this particular case you don t need to write javascript   You can see more here  http   getbootstrap com 2 3 2 javascript html modals

User · Answer

Check out the complete solution here    http   www w3schools com bootstrap tryit asp filename trybs ref js modal show amp stacked h  Make sure to put libraries in required order to get result   1- First bootstrap min css 2- jquery min js 3- bootstrap min js   In other words jquery min js must be call before bootstrap min js        lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt    lt script src  https   ajax googleapis com ajax libs jquery 3 1 1 jquery min js  gt   lt  script gt      lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt

User · Answer

If you use links s onclick function to call a modal by jQuery  the  href  can t be null   For example            lt a href    onclick  openModal    gt Open a Modal by jQuery lt  a gt                   lt script type  text javascript  gt   function openModal             myModal   modal              lt  script gt    The Modal can t show  The right code is     lt a href     onclick  openModal    gt Open a Modal by jQuery lt  a gt

User · Answer

Try to use jQuery instead of   sign when calling the function  it worked in my case as you can see below   jQuery noConflict     jQuery   myModal   modal  show       jQuery noConflict     because when jQuery   myModal   modal  show    doesn t work  it s caused by having included jQuery twice  Including jQuery 2 times makes modals not to work  and it would resolve the problem in that case  as in my case it is repeating    Further you can go to this link  Bootstrap Model Window Not Showing by Calling Through JQuery

User · Answer

Bootstrap has a few functions that can be called manually on modals       myModal   modal  toggle        myModal   modal  show        myModal   modal  hide      You can see more here  Bootstrap modal component  Specifically the methods section   So you would need to change       my-modal   modal       show   false         to       myModal   modal  show       If you re looking to make a custom popup of your own  here s a suggested video from another community member   https   www youtube com watch v zK4nXa84Km4

User · Answer

Bootstrap 4 3 - more here   x000D   x000D      exampleModal   modal    x000D   lt  -- Initialize Bootstrap 4 -- gt  x000D   x000D   lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  integrity  sha384-ggOyR0iXCbMQv3Xipma34MD dH 1fQ784 j6cY iJTQUOhcWr7x9JvoRxT2MZw1T  crossorigin  anonymous  gt  x000D   lt script src  https   code jquery com jquery-3 3 1 slim min js  integrity  sha384-q8i X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo  crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs popper js 1 14 7 umd popper min js  integrity  sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1  crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   stackpath bootstrapcdn com bootstrap 4 3 1 js bootstrap min js  integrity  sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf nJGzIxFDsf4x0xIM B07jRM  crossorigin  anonymous  gt  lt  script gt  x000D   x000D   x000D   lt  -- MODAL -- gt  x000D   x000D   lt div class  modal fade  id  exampleModal  tabindex  -1  role  dialog  gt  x000D     lt div class  modal-dialog  role  document  gt  x000D       lt div class  modal-content  gt  x000D       x000D         lt div class  modal-body  gt  x000D          Hello world    x000D         lt  div gt  x000D         x000D         lt div class  modal-footer  gt  x000D           lt button type  button  class  btn btn-secondary  data-dismiss  modal  gt Close lt  button gt  x000D         lt  div gt  x000D   x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Here is how to load bootstrap alert as soon as the document is ready  It is very easy just add      document  ready function           myModal   modal          I made a demo on W3Schools    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 3 2 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 Here is how to load a bootstrap modal as soon as the document is ready  lt  h2 gt  x000D     lt  -- Trigger the modal with a button -- gt  x000D   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 script gt  x000D    document  ready function    x000D         myModal   modal    x000D      x000D   lt  script gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Just call the modal method without passing any parameters  using jQuery selector    Here is example       modal   modal

User · Answer

Try This  myModal1 is the id of modal      myModal1   modal   show  true

User · Answer

lt script type  text javascript  gt        function                 mybtn   click function                      my-modal   modal  show                         lt  script gt

User · Answer

Most often  when     myModal   modal  show    doesn t work  it s caused by having included jQuery twice  Including jQuery 2 times makes modals not to work   Remove one of the links to make it work again   Furthermore  some plugins cause errors too  in this case add   jQuery noConflict         myModal   modal  show

[javascript] How to open a Bootstrap modal window using jQuery?

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap