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?

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

Solution 2

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

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

Solution 3

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

Solution 4

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>

View more solutions

Comments

[Robert]

Please include the text from the link and explain it here. Once the link goes stale, your answer becomes useless.

[Kashyap Neeraj]

Can you Please explain it clearly. I am unable to understand it.