ナビゲーションバーのアンカータグのリストがあります。 「登録」をクリックしたときにモーダルを開きたい。コードは次のとおりです。
<li><a href="@Url.Action("Login", "Home")">Login</a></li>
<li><a href="#"> data-toggle="modal" data-target="modalRegister"> Register</a></li>
<div id="modalRegister" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="text-align-last: center">Register</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
私は通常、ボタンを使用してモーダルを開きますが、<a></a>
のために<a href""></a>
タグを使用して開く方法がよくわかりません。どうすれば結果を達成できますか?
以下の行を変更する必要があります。
<li><a href="#"> data-toggle="modal" data-target="modalRegister"> Register</a></li>
modalRegister
はIDであるため、htmlでIDを参照するには、先行する#
が必要です。
したがって、変更されたhtmlコードスニペットは次のようになります。
<li><a href="#" data-toggle="modal" data-target="#modalRegister"> Register</a></li>
https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp
注:<a>
要素の場合、data-targetを省略し、代わりにhref="#modalID"
を使用します。
ここにあなたの質問に答えるW3Schoolsへのリンクがあります https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp
注:アンカータグ要素の場合、data-targetを省略し、代わりにhref = "#modalID"を使用します。
それがお役に立てば幸いです
それを置き換えるだけ
<a href="" data-toggle="modal" data-target="#modalRegister"> Launch demo modal </a>
代わりに
<li><a href="#"> data-toggle="modal" data-target="modalRegister"> Register</a></li>