Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
185
rated 0 times [  186] [ 1]  / answers: 1 / hits: 34433  / 9 Years ago, tue, february 17, 2015, 12:00:00

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




More From » jquery

 Answers
24

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




[#67797] Saturday, February 14, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
yulisa

Total Points: 436
Total Questions: 102
Total Answers: 123

Location: Palau
Member since Tue, May 30, 2023
1 Year ago
;