Geek Answers Handbook

How to use Bootstrap modal with anchor tag for Register?

I have a list of anchor tags for my navigation bar. I want to open modal when "Register" is clicked. Here is the 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>

I usually use the button to open the modal code, but I'm not quite sure how to open it with the <a></a> tag because of the <a href""></a> . How can I achieve results?

+6
source share
3 answers

You will need to change the following line:

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

modalRegister is an identifier and therefore requires the preceding # to reference the id in html.

So, the modified html code fragment will look like this:

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

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

Note. For <a> elements, omit the data target and use href="#modalID" .

+2
source

Just replace it

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

instead

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

More articles:


All Articles