0
ブートストラップの新機能で、リンククリックイベントでモーダルウィンドウを表示する方法を学びます。しかし、次のコードとコンソールエラーでは何も表示されません。javascriptでブートストラップモーダルを呼び出せません
ロジック全体は、次のように<head>要素に含まれています。私がする必要があるのは、ユーザーがナビゲーションバーの[サインイン]リンクをクリックしたときにモーダルウィンドウを表示することです。ここで
<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>
はリンクサインインのコードです：
<ul class="nav navbar-nav navbar-right">
<li><a href="#" id="logonLink"><span class="glyphicon glyphicon-log-in"></span> Sign In</a></li>
</ul>
私はブートストラップを使用してモーダルウィンドウを呼び出すことができます。しかし、この純粋なJavaScript呼び出しは常に失敗します。
私が間違っていたことを誰かが知っていますか？
ありがとうございました。
更新：私は、次のコードがJQueryであることを知っていました。構文が100％正しいかどうかはわかりません。
リンク：
<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 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>
あなたのhtmlは、 '
'タグ内にある必要があります – randomguy04モーダルコードとスクリプトコード全体を本文に移動しました。しかし、同じ結果。何も表示されません。 –
あなたは正確に移動しましたか？ jsFiddleまたはcodepenにコードを書いてください。 – randomguy04