Wie kann Bootstrap modal mit dem Anker-Tag für Register verwendet werden?

Question

Ich habe eine Liste von Anker-Tags für meine Navigationsleiste. Ich möchte ein Modal öffnen, wenn auf "Registrieren" geklickt wird. Hier ist der Code:

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

ich normalerweise eine Taste verwenden, um einen modalen zu öffnen, aber ich bin mir nicht ganz sicher, wie ich es mit dem <a></a> Tag wegen der <a href""></a> öffnen würde. Wie kann ich die Ergebnisse erzielen?

Answer 1

Sie das unten Zeile ändern müssen:

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

modalRegister ist die ID und erfordert daher eine vorhergehende # für ID Referenz in html.

So wird der modifizierte HTML-Code-Schnipsel sein würde wie folgt:

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

Answer 2

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

Hinweis: Für <a> Elemente, Daten-Ziel weglassen, und href="#modalID" stattdessen verwenden.