Bootstrap myModal modal show is not working

Question

I m not sure why but all the modal functions are not working with me  I checked the version and the load they are fine     I keep getting this error message   Uncaught TypeError         modal is not a function  for the hide I already found an alternative  instead of       myModal   modal  hide      I used this        myModal  close   click      And it works perfectly   The problem now is with the show      myModal   modal  show      I also tried both      myModal   modal  toggle      And       myModal   modal      but unfortunately none of them is working   Here html code -when the button is clicked I will do some verification and handle a json data from the web service if it succeed then I want show my modal- everything is working except the show      lt button type  button  id  creatNewAcount  class  btn btn-default  data-toggle  modal  gt Sign up lt  button gt    if there s any alternative I would like to know it

User · Answer

are you sure that the id of the modal is "myModal"? if not then the call will not trigger it.

also - just from reading your post - you are triggering a function / validation with this button

<button type="button" id="creatNewAcount" class="btn btn-default" data-toggle="modal">Sign up</button>

and then if all is well - you want to trigger the modal. - if this is hte case - then you should remove the toggle from this button click. I presume you have an event handler tied to this click? you need the .modal("show") as a part of that function. not toggled from this button. also - is this id correct "creatNewAcount" as opposed to this spelling "createNewAccount"

<button type="button" id="creatNewAcount" class="btn btn-default" >Sign up</button>

User · Answer

Please   try and check if the triggering button has attribute type  button   Working example      lt button type  button  id  trigger  style  visibility visible   onclick  modal btn click    gt Trigger Modal Click lt  button gt      lt  -- Modal -- gt     lt div class  modal fade  id  myModal  role  dialog  gt       lt div class  modal-dialog modal-sm  gt         lt div class  modal-content  gt           lt div class  modal-header  gt             lt button type  button  class  close  data-dismiss  modal  gt  amp times  lt  button gt             lt h4 class  modal-title  gt Modal Header lt  h4 gt           lt  div gt           lt div class  modal-body  gt             lt p gt This is a small modal  lt  p gt           lt  div gt           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         lt  div gt       lt  div gt     lt  div gt       lt script  gt             function modal btn click                         myModal   modal   show  true                      lt  script gt

User · Answer

Please also make sure that the modal div is nested inside your  lt body gt  element

User · Answer

Most common reason for such problems are     1 If you have defined the jquery library more than once     lt script type  text javascript  src    code jquery com jquery-1 11 3 min js  gt  lt  script gt   lt script src  http   maxcdn bootstrapcdn com bootstrap 3 3 6 js bootstrap min js  gt  lt  script gt        lt div class  modal fade  id  myModal  aria-hidden  true  gt                       lt  div gt    lt script src  https   ajax googleapis com ajax libs jquery 1 12 0 jquery min js  gt  lt  script gt    The bootstrap library gets applied to the first jquery library but when you reload the jquery library  the original bootstrap load is lost Modal function is in bootstrap       2 Please wrap your JavaScript code inside     document  ready function            3 Please check if the id of the modal is same   as the one you have defined for the component Also check for duplication s of same id

User · Answer

the solution of  bootstrap modal is not opening  is  put your Jquery CDN first in the head tag  after starting head tag   I wasted two days in finding this problem

User · Answer

Use  modal  show true   and  modal  show false   instead of   show   and   hide       it seems to be bootstrap   jquery version combination dependent  Hope it helps

User · Answer

lt script src  https   ajax googleapis com ajax libs jquery 1 11 3 jquery min js  gt  lt  script gt  lt script type  text javascript  src    code jquery com jquery-1 11 3 min js  gt  lt  script gt    the first googleapis script is not working now a days use this second scripe given by jquery

User · Answer

My root cause was that I forgot to add the   before the id name  Lame but true   From      scheduleModal   modal  show      To      scheduleModal   modal  show      For your reference  the code sequence that works for me is   lt script gt  function scheduleRequest                 scheduleModal   modal  show           lt  script gt   lt script src   lt c url value   resources bootstrap js bootstrap min js   gt   gt   lt  script gt   lt script     src   lt c url value   resources plugins fastclick fastclick min js   gt   gt   lt  script gt   lt script     src   lt c url value   resources plugins slimScroll jquery slimscroll min js   gt   gt   lt  script gt   lt script     src   lt c url value   resources plugins datatables jquery dataTables min js   gt   gt     lt  script gt   lt script     src   lt c url value   resources plugins datatables dataTables bootstrap min js   gt   gt   lt  script gt   lt script src   lt c url value   resources dist js demo js   gt   gt   lt  script gt

User · Answer

After trying everything on the web for my issue  I needed to add in a small delay to the script before trying to load the box  Even though I had put the line to load the box on the last possible line in the entire script  I just put a 500ms delay on it using setTimeout      gt         modalID   modal  show       500    Hope that helps someone in the future  100  agree it s prob because I don t understand the flow of my scripts and load order  But this is the way I got around it

User · Answer

jQuery lib has to be loaded first  In my case  i was loading bootstrap lib first  also tried  tag with target and firing a click trigger  But the main issue was - jquery has to be loaded first

User · Answer

use the object to call      lt a href     onclick      myModal   modal  show     gt Try This lt  a gt    or if you using ajax to show that modal after get result  this is work for me       ajax   url   YourUrl   type   POST   data   x 1 amp y 2 amp z 3   cache  false  success  function result              Your Function here             myModal   modal  show

User · Answer

Try This without paramater      myModal   modal      it should be worked

User · Answer

This can happen for a few reasons    You forgot to include Jquery library in the document You included the Jquery library more than once in the document You forgot to include bootstrap js library in the document The versions of your Javascript and Bootstrap does not match  Refer bootstrap documentation to make sure the versions are matching The modal  lt div gt  is missing the modal class The id of the modal  lt div gt  is incorrect   eg  you wrongly prepended   in the id of the  lt div gt     sign is missing in the Jquery selector

User · Answer

I got same issue while working with Modal Popup Bootstrap   I used Id and trigger click event for showing and hidding modal popup instead of     Id   modal  show   and     id   modal  hide             lt button type  button  id  btnPurchaseClose  class  close  data dismiss  modal  aria-label  Close  gt   lt span aria-hidden  true  gt    lt  span gt  lt  button gt   lt a class  btn btn-default  id  btnOpenPurchasePopup  data-toggle  modal  data target   newPurchasePopup  gt Select lt  a gt          btnPurchaseClose   trigger  click      for close popup           btnOpenPurchase   trigger  click       for open popup

User · Answer

lt div class  modal fade  id  myModal  aria-hidden  true  gt                 lt  div gt    Note   Remove fade class from the div and enjoy it should be worked

[javascript] Bootstrap $('#myModal').modal('show') is not working

Examples related to javascript

Examples related to jquery

[javascript] Bootstrap $('#myModal').modal('show') is not working

Examples related to javascript

Examples related to jquery

Examples related to bootstrap-modal