Trigger bootstrap modal if a condition statement is not met

Question

Instead of using the default jquery alert popup, I'd like to trigger a Bootstrap Modal. All the tutorials I've read, the modal is triggered by the click(function(){}); . I'd like to have if triggered if a condition in my "if statement" is not met. Here is the code I have

 var test1 = $('#test').val(); $('#go').click(function() { if (test1 === "") { alert("Please enter all values in the fields"); $('#myModal').modal('show'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <div class="form-group"> <label for="test" class="col-sm-3 control-label">Test</label> <div class="col-sm-3"> <input type="text" class="form-control" id="test" placeholder="Enter A Value"> </div> </div> <div class="form-group"> <div class="col-sm-offset-6 col-sm-3"> <button type="button" id="go" class="btn btn-primary">Go</button> </div> </div> <!--Modal--> <div class="modal fade" id="#myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> </button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>One fine body&hellip;</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> <!--End Modal--> 

Answer 1

In your case, since the modal has an id of id="#myModal" , you need to escape the # within the jQuery selector, $('#\\\\#myModal').modal('show') :

 $('#go').click(function() { var test1 = $('#test').val(); if (test1 === "") { $('#\\\\#myModal').modal('show'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <div class="form-group"> <label for="test" class="col-sm-3 control-label">Test</label> <div class="col-sm-3"> <input type="text" class="form-control" id="test" placeholder="Enter A Value"> </div> </div> <div class="form-group"> <div class="col-sm-offset-6 col-sm-3"> <button type="button" id="go" class="btn btn-primary">Go</button> </div> </div> <!--Modal--> <div class="modal fade" id="#myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> </button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>Please enter all values in the fields.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> <!--End Modal--> 

Answer 2

从ID中删除“＃”，您的代码应该可以正常工作

<div class="modal fade" id="myModal">