I have a list of anchor tags for my navigation bar. I want to open a 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">×</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 normally use a button to open a modal, but I'm not quite sure how I would open it using the <a></a>
tag because of the <a href""></a>
. How can I achieve the results?
This question is related to
html
twitter-bootstrap
modal-dialog
bootstrap-modal
https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp
Note: For <a>
elements, omit data-target, and use href="#modalID"
instead.
Here is a link to W3Schools that answers your question https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp
Note: For anchor tag elements, omit data-target, and use href="#modalID" instead:
I hope that helps
Just replace it:
<li><a href="" data-toggle="modal" data-target="#modalRegister">Register</a></li>
Instead of:
<li><a href="#" data-toggle="modal" data-target="modalRegister">Register</a></li>
Source: Stackoverflow.com