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:

Answer 1

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

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

Answer 2

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

Answer 3

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>

Answer 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

Answer 5

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

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