I'm new to Bootstrap and trying to learn how to show a modal window via a link click event. But it does not show anything with the following code and console errors none.
The whole logic is included in the <head> element as follows. What I need to do is show a modal window when user click on the Sign In link in the navigation bar.
<head>
<title>Sample Web Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="compiled/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="compiled/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="compiled/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<div class="modal fade" id="loginBox" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">Sign In</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input type="text" class="form-control" id="userName" placeholder="User Name">
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="doLogon">Sign In</button>
</div>
</div>
</div>
</div>
<!-- ************** THIS IS NOT CALLED WHEN CLICKED ??? **************** -->
<script type="text/javascript">
$('#logonLink').on('click', function(e) {
$('#loginBox').modal({
keyboard: false,
backdrop: static
});
});
$('#doLogon').on('click', function(e) {
alert('Thank you for Signing In');
$('#logonBox').modal('hide');
});
</script>
</head>
Here is the code in the Sign In link:
<ul class="nav navbar-nav navbar-right">
<li><a href="#" id="logonLink"><span class="glyphicon glyphicon-log-in"></span> Sign In</a></li>
</ul>
I can call the modal window using Bootstrap. But this pure JavaScript calling always fail.
Does anyone know what I did wrong?
Thanks.
Update: I figured out that following code is in question which is a JQuery. I don't know if the syntax is 100% correct.
Link:
<ul class="nav navbar-nav navbar-right">
<li><a href="#" id="logonLink"><span class="glyphicon glyphicon-log-in"></span> Sign In</a></li>
</ul>
JQuery Script:
<script type="text/javascript">
$('#logonLink').on('click', function(e) {
$('#loginBox').modal({
keyboard: false,
backdrop: static
});
});
$('#doLogon').on('click', function(e) {
alert('Thank you for Signing In');
$('#logonBox').modal('hide');
});
</script>