Question

[Solved] Bootstrap $(‘#myModal’).modal(‘show’) is not working

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.

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

if there’s any alternative I would like to know it.

Enquirer: Nysa

||

Solution #1:

Most common reason for such problems are

1.If you have defined the jquery library more than once.

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <div class="modal fade" id="myModal" aria-hidden="true">
    ...
    ...
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

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

Respondent: Nysa

Solution #2:

<div class="modal fade" id="myModal" aria-hidden="true">
   ...
   ...
</div>

Note: Remove fade class from the div and enjoy it should be worked

Respondent: Prakash Thete

Solution #3:

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’),
`

    <button type="button" id="btnPurchaseClose" class="close" data dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span></button>
<a class="btn btn-default" id="btnOpenPurchasePopup" data-toggle="modal" data target="#newPurchasePopup">Select</a>
    $('#btnPurchaseClose').trigger('click');// for close popup

     $('#btnOpenPurchase').trigger('click');`// for open popup

Solution #4:

This can happen for a few reasons:

  1. You forgot to include Jquery library in the document
  2. You included the Jquery library more than once in the document
  3. You forgot to include bootstrap.js library in the document
  4. The versions of your Javascript and Bootstrap does not match. Refer bootstrap documentation to make sure the versions are matching
  5. The modal <div> is missing the modal class
  6. The id of the modal <div> is incorrect. (eg: you wrongly prepended # in the id of the <div>)
  7. # sign is missing in the Jquery selector
Respondent: Muhammad Bilal

Solution #5:

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

<script>
function scheduleRequest() {
        $('#scheduleModal').modal('show');
    }
</script>
<script src="<c:url value="/resources/bootstrap/js/bootstrap.min.js"/>">
</script>
<script
    src="<c:url value="/resources/plugins/fastclick/fastclick.min.js"/>">
</script>
<script
    src="<c:url value="/resources/plugins/slimScroll/jquery.slimscroll.min.js"/>">
</script>
<script
    src="<c:url value="/resources/plugins/datatables/jquery.dataTables.min.js"/>">  
</script>
<script
    src="<c:url value="/resources/plugins/datatables/dataTables.bootstrap.min.js"/>">
</script>
<script src="<c:url value="/resources/dist/js/demo.js"/>">
</script>

Solution #6:

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.

Respondent: Siddharth

Solution #7:

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.

Respondent: Paul Vermeer

Solution #8:

Please,

try and check if the triggering button has attribute type=”button”.
Working example:

  <button type="button" id="trigger" style="visibility:visible;" onclick="modal_btn_click()">Trigger Modal Click</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>This is a small modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

   <script >
           function modal_btn_click() {

               $('#myModal').modal({ show: true });
           }
   </script>
Respondent: Jai Prakash

Solution #9:

Try This without paramater

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

it should be worked

Respondent: BR1COP

Solution #10:

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>
Respondent: Ahmed Hany

Solution #11:

use the object to call…

<a href="#" onclick='$("#myModal").modal("show");'>Try This</a>

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&y=2&z=3",
cache: false, success: function(result){
        // Your Function here
        $("#myModal").modal("show");
    }
});
Respondent: gavgrif

Solution #12:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script type="text/javascript" src="https://www.py4u.net/discuss///code.jquery.com/jquery-1.11.3.min.js"></script>

the first googleapis script is not working now a days use this second scripe given by jquery

Respondent: Rhega

Solution #13:

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.

Respondent: kumar

Solution #14:

Please also make sure that the modal div is nested inside your <body> element.

Respondent: Sajal

Solution #15:

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(() => {  $('#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

Respondent: saar schweid

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Most Popular

To Top
India and Pakistan’s steroid-soaked rhetoric over Kashmir will come back to haunt them both clenbuterol australia bossier man pleads guilty for leadership role in anabolic steriod distribution conspiracy