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

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

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:

  • Login
  • data-toggle=”modal” data-target=”modalRegister”> Register
  • I normally use a button to open a modal, but I’m not quite sure how I would open it using the tag because of the . How can I achieve the results?

    Solutions/Answers:

    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:

    Just Replace it

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

    instead of

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

    Solution 4:

    Here is a link to W3Schools that answers your question
    https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp

    Related:  use intro.js on bootstrap dropdown element

    Note: For anchor tag elements, omit data-target, and use href=”#modalID” instead:

    I hope that helps

    References