web-dev-qa-db-ja.com

Registerのアンカータグを使用してBootstrap modalを使用するには？

ナビゲーションバーのアンカータグのリストがあります。 「登録」をクリックしたときにモーダルを開きたい。コードは次のとおりです。

 <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">&times;</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>タグを使用して開く方法がよくわかりません。どうすれば結果を達成できますか？

htmlhtml5twitter-bootstrapmodal-dialogbootstrap-modal
18
Lebone

以下の行を変更する必要があります。

<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>
39
Sendhilkumar Alalasundaram

https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp

注：<a>要素の場合、data-targetを省略し、代わりにhref="#modalID"を使用します。

5
Mtu

ここにあなたの質問に答えるW3Schoolsへのリンクがあります https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp

注：アンカータグ要素の場合、data-targetを省略し、代わりにhref = "＃modalID"を使用します。

それがお役に立てば幸いです

0
Raphael

それを置き換えるだけ

<a href="" data-toggle="modal" data-target="#modalRegister"> Launch demo modal </a>

代わりに

<li><a href="#"> data-toggle="modal" data-target="modalRegister"> Register</a></li>
0
Anupam M