60

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">&times;</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>

3 Answers 3

125

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.

4
  • Seems odd that you would give the same class name as the id. Commented Jul 14, 2015 at 1:10
  • 2
    This was just for illustration and taken from the code given by user. Core focus was only on to make it work functionally using data-target :)
    – Nimmi
    Commented Jul 15, 2015 at 8:54
  • 1
    the <a href.. > needs a valid reference otherwise the link is not working. corrected: <a href="#bannerformmodal" data-toggle="modal" data-target="#bannerformmodal">Load me</a>
    – nh-labs
    Commented Jun 8, 2017 at 0:13
  • Thanks, i was browsing the web for the same question and here i found your solution. Thank you :-)
    – P.Davide
    Commented Aug 2, 2019 at 10:28
3

Please convert "data-toggle" to "data-bs-toggle" in your link to make it work. Instead of giving a class name to your modal, you need to give it an id and use that id as the href url of your link.

<a href="#bannerformmodal" data-bs-toggle="modal">Load me</a>

<div id="bannerformmodal" class="modal fade"  tabindex="-1" role="dialog" aria-labelledby="bannerformmodal" aria-hidden="true">
0
-2

A Simple Approach will be to use a normal link and add Bootstrap modal effect to it. Just make use of my Code, hopefully you will get it run.

 <div class="container">
        <div class="row">
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="addContact" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><b style="color:#fb3600; font-weight:700;">X</b></button><!--&times;-->
                            <h4 class="modal-title text-center" id="addContact">Add Contact</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <ul class="nav nav-tabs">
                                    <li class="active">
                                        <a data-toggle="tab" style="background-color:#f5dfbe" href="#contactTab">Contact</a>
                                    </li>
                                    <li>
                                        <a data-toggle="tab" style="background-color:#a6d2f6" href="#speechTab">Speech</a>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <div id="contactTab" class="tab-pane in active"><partial name="CreateContactTag"></div>
                                    <div id="speechTab" class="tab-pane fade in"><partial name="CreateSpeechTag"></div>
                                </div>

                            </div>
                        </div>
                        <div class="modal-footer">
                            <a class="btn btn-info" data-dismiss="modal">Close</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.