Bootstrap $('#myModal').modal('show') is not working
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 ).
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
Solution 3
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
<div>
is missing themodal
class - The id of the modal
<div>
is incorrect. (eg: you wrongly prepended#
in the id of the<div>
) #
sign is missing in the Jquery selector
Solution 4
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 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>
Related videos on Youtube
![Nysa](https://lh5.googleusercontent.com/-6y04As_HJMY/AAAAAAAAAAI/AAAAAAAAADw/9PuThZW6kjA/photo.jpg?sz=256)
Nysa
Updated on June 08, 2021Comments
-
Nysa about 3 years
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.
-
MortenMoulder about 8 yearsYou need to load jQuery first then jQuery UI/Bootstrap modal afterwards. Are you sure it's being loaded in that order?
-
Nysa about 8 yearsare not they ?!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
-
brk about 8 yearsIt is not possible to answer unless you put your code
-
MortenMoulder about 8 yearsTry a newer version of jQuery. 1.12 is quite old.
-
Nysa about 8 yearsI'm sure, because as I mentioned the same thing happened with the hide but when I replaced it with the one that I have found It worked so I'm hoping for a replacement for the show.
-
u.unver34 over 6 yearsProbably you are woring on WP. About jQuery 1.12 and WP issue you can check out this: wordpress.stackexchange.com/questions/244537/…
-
-
Nysa about 8 yearsI don't want call it immediately.
-
Rhega about 8 yearsthe question is... are you using ajax to do some verification and for any result you want to show it on modal popup ?
-
Nysa about 8 yearsI want to do that but not immediately I have some code and if this code generate the correct result then the modal should appear if not it will not appear.
-
Nysa about 8 yearsno I don't want to show the result in the modal. I want the modal to be shown in some cases depending on the result .
-
Rhega about 8 yearsI update my answer... or if still not working, can you show us that generate code ?
-
Nysa about 8 yearsOMG It worked. finally found the duplicated one in the middle. I have been searching in my code since you posted your answer. thank you so much you really helped me. I'm really happy.
-
Nysa about 8 yearsthank you it is working now. it was a duplicate load.
-
Jeremy E over 6 years@PrakashThete Legendary thank you so much first working solution to a super frustrating problem
-
Moi Hawk over 5 years@PrakashThete hello, I'm still having problems I have added my code below could you please take a look.
-
Prakash Thete over 5 years@MoiHawk Please ask a new question for your problem. People might be able to help you that way.
-
sandeep over 4 yearsyou saved my life. I love you
-
Alfiza malek almost 4 yearsCould ypou please share the reason behind removing fade class.It was working with fade class in all most system but facing and issue on one perticular system and tried after removing fade class and get working.
-
Jerry over 3 years@Rafikmalek I believe it is due to having another
fade
class somewhere overriding the fade class here. Removing should it just remove the special effects while keeping the functionality. -
Heretic Monkey over 3 yearsNot sure why this is upvoted but an earlier answer saying the same thing is not.
-
Iqbal Khan almost 3 yearsYou save my day, I read your answer and it helped me fixing a issue on production with real user on call :D
-
digiwebguy over 2 yearsThis fixed my issue thanks!