Menu
How can I make button become a link only and have a popup in bootstrap 3?
code
<a href="" data-toggle="modal" data-target=".bannerformmodal">Load me</a> <div class="modal fade bannerformmodal" tabindex="-1" role="dialog" aria-labelledby="bannerformmodal" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Contact Form</h4> </div> <div class="modal-body"> <form id="requestacallform" method="POST" name="requestacallform"> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-user"></i></span> <input id="first_name" type="text" class="form-control" placeholder="First Name" name="first_name"/> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-user"></i></span> <input id="last_name" type="text" class="form-control" placeholder="Last Name" name="last_name"/> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope"></i></span> <input id="email1" type="text" class="form-control" placeholder="Email" name="email1" onchange="validateEmailAdd();"/> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-group"></i></span> <input id="company_name_c" type="text" class="form-control" placeholder="Company Name" name="company_name_c"/> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-phone"></i></span> <input id="phone_mobile" type="text" class="form-control" placeholder="Mobile" name="phone_mobile"/> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-building-o"></i></span> <select class="form-control" name="monthly_rental" class="selectpicker"> <option>How many seats do you have available?</option> <option>10-50</option> <option>50-100</option> <option>100-200</option> <option>200-500</option> <option>500+</option> </select> </div> </div> <div class="control-group"> <div class="controls"> <textarea id="description" type="text" name="description" placeholder="Description"></textarea> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-blue">Submit</button> </div> </div> </div> </div> </div> 
800
So if a standalone page is used inside a modal popup it would have a separate url but you can not just put that page's address in browser and get popup because popup is styled using css, you will get to see the page contents. Hope this helps.
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.
03/08/2021. The Modal Text / HTML Link Element is another simple element, that allows you to add a text or html link to trigger a modal dialog, in conjunction with the Modal Element.
To make it work, first remove the data-target and data-toggle attributes from the link. You can leave the href attribute there. Using jQuery we can add a click listener to the <a> element, but we do not want to directly go to the page indicated by the href attribute so we use preventDefault() .
Please remove . from your target it should be a id
<a href="#bannerformmodal" data-toggle="modal" data-target="#bannerformmodal">Load me</a> Also you have to give your modal id like below
<div class="modal fade bannerformmodal" tabindex="-1" role="dialog" aria-labelledby="bannerformmodal" aria-hidden="true" id="bannerformmodal"> Here is the solution in a fiddle.
115
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
