Bootstrap Checbox Modal Not Working

Question

Bootstrap modal checkbox not working when checkbox is checked.

The condition is when user click the checkbox the bootstrap modal popup should be displayed

Bootstrap Version 3.3.6

Jquery Version 2.1.3

 $(function() { $('#tos-checkbox').click(function() { if ($('#tos-checkbox').is(":checked")) { $('#tosmodal').modal('show'); }else { $('#tosmodal').modal('hide'); } }); }); 

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <input id="tos-checkbox" type="checkbox"> <span>I agree to the Terms And Conditions.</span> <div class="modal fade" id="tosmodal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" >&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" >Close</button> </div> </div> </div> </div> </div> 

Answer 1

change ther order of JQuery. Put JQuery to very first

 $(function() { $('#tos-checkbox').click(function() { if ($('#tos-checkbox').is(":checked")) { $('#tosmodal').modal('show'); }else { $('#tosmodal').modal('hide'); } }); }); 

  <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <input id="tos-checkbox" type="checkbox"> <span>I agree to the Terms And Conditions.</span> <div class="modal fade" id="tosmodal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" >&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" >Close</button> </div> </div> </div> </div> </div> 

Answer 2

JQUERY is required to use bootstrap.js. The reason why you need to rearrange the order you call bootstrap and jquery is that you need to call jquery first before bootstrap.js. Your question's been answered. I just want to take part in explaining. Hope it helps.