Menu
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?
810
You can display bootstrap modal using data attribute (data-toggle, data-target) in anchor tag. You have to use bootstrap CDN in your HTML page in which you want to use the bootstrap modal.
To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes: data-toggle="modal" opens the modal window. data-target="#myModal" points to the id of the modal.
To invoke the modal window, you need to have some kind of a trigger. You can use a button or a link. Here we have used a button. If you look in the code above, you will see that in the <button> tag, the data-target = "#myModal" is the target of the modal that you want to load on the page.
In this example first, use the find() method to find out the modal dialog. Then subtract the modal height from the window height and divide that into half and will place the modal that will be the centered(vertically). This solution will dynamically adjust the alignment of the modal.
Examples of Bootstrap modal form use: 1 Email signup 2 Register modal 3 Contact form More ...
The short answer is: use the anchor element (<a>)and add the Bootstrap class .btnin combination with the Bootstrap button contextual classes (like .btn-primary). To create an anchor link button, you can have to use the <a>element. After that, add the Bootstrap class .btnin combination with the .btn-primary.
Inside this <div>, add the modal's header, body, and footer. The .modal-header class is used to define the style for the header of the modal. The <button> inside the header has a data-dismiss="modal" attribute which closes the modal if you click on it.
We recommend migrating to the latest version of our product - Material Design for Bootstrap 5. Bootstrap modal forms are displayed-on-action pop-up forms that are used for gathering data from website visitors and to register or log users. Using them alongside valuable content might bring a lot of business value to your project.
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
