How to use Bootstrap modal using the anchor tag for Register?

Question

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">&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 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?

Answer 1

You will have to modify the below line:

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

modalRegister is the ID and hence requires a preceding # for ID reference in html.

So, the modified html code snippet would be as follows:

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