2015-11-13 17 views
6

ナビゲーションバーのアンカータグのリストがあります。私は "登録"をクリックするとモーダルを開きたい。ここでは、コードです:登録のためのアンカータグを使用してブートストラップモダルを使用する方法?

<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 href""></a><a></a>タグを使用してそれを開くだろうか、かなりよく分かりません。どうすれば結果を達成できますか?あなたは下の行変更する必要があります

答えて

24

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

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

注:<a>要素については、データターゲットを省略し、その代わりにhref="#modalID"を使用します。

+4

リンクのテキストを含めて、ここで説明してください。リンクが古くなると、あなたの答えは役に立たなくなります。 – Robert

関連する問題