html - How to make 2 buttons reference separate modal forms? -
i have 2 different contact buttons under 2 different price category. trying make each "contact us" button opens modal form specific price category.
here price boxes:
<div class="col-md-3 col-sm-6"> <div class="pricing hover-effect"> <div class="pricing-head"> <h3>device testing <span>great track gas & electric meter tests, backflow tests , pm orders.</span></h3> <h4><i>$</i>50<i></i> <span>/user/month</span></h4> </div> <ul class="pricing-content list-unstyled"> <li><i class="icon-file-alt"></i> ad-hoc order creation</li> <li><i class="icon-list"></i> device testing & inspection tracking</li> <li><i class="icon-sitemap"></i> track comments field</li> </ul> <div class="pricing-footer"> <!-- <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. ut non libero magna psum olor .</p> --> <a class="btn-u" href="meter" style="font-size:15px;"> want learn more</a> <div class="pricing-contact"> <button data-toggle="modal" data-target="#modal-1">contact us</button> </div> </div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="pricing hover-effect"> <div class="pricing-head"> <h3>professional <span>straightforward work order management, great tracking on paper.</span></h3> <h4><i>$</i>75<i></i> <span>/user/month</span></h4> </div> <ul class="pricing-content list-unstyled"> <li><i class="icon-map-marker"></i> work order mapping</li> <li><i class="icon-off"></i> equipment installs & transfers</li> <li><i class="icon-comments"></i> order assignment & dispatching</li> </ul> <div class="pricing-footer"> <!-- <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. ut non libero magna psum olor .</p> --> <a class="btn-u" href="professional" style="font-size:15px;"> want learn more</a> <div id=pricing-contact> <div class="pricing-contact"> <button href="#professional" data-toggle="modal" data-target="#modal-2" type="submit">contact us</button> </div> </div> </div> </div> </div> and code use open modal form is:
<!-- beginning of pop-up device form --> <div class="btn-buy hover-effect" data-target="#modal-1" data-toggle= "modal"></div> <div class="modal fade" id="responsive" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal" type= "button">×</button> <h4 class="modal-title" id="mymodallabel">sprymobile device testing</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-md-6"> <form> <h4>name</h4> <p><input class="form-control" id="contactname" name="contactname" type="text"></p> </form> </div> <div class="col-md-6"> <h4>email address</h4> <p><input class="form-control" id="contactemail" name="contactemail" type="email"></p> </div> <div class="col-md-12"> <h4>tell operation</h4> <textarea class="form-control" cols="20" id= "contactmessage" name="contactmessage" rows="7"> </textarea> </div> </div> </div> <div class="modal-footer"> <button class="btn-u btn-u-default" data-dismiss="modal" type="button">close</button> <button class="btn-u" id= "contactsubmit" name="contactsubmit">send message <i class= "icon-spinner icon-spin" id="contactspinner" style= "display:none;"></i></button> <div class="alert alert-success" id="messagesuccess" style= "display:none;"> <button class="close" data-dismiss="alert" type= "button">x</button> <strong>thank you!</strong> appreciate comments, , soon. </div> </div> </div> </div> </div><!-- end of pop-up --> <!-- beginning of pop-up professional form --> <div class="btn-buy hover-effect" data-target="#modal-2" data-toggle= "modal"></div> <div class="modal fade" id="responsive" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal" type= "button">×</button> <h4 class="modal-title" id="mymodallabel">sprymobile professional</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-md-6"> <form> <h4>name</h4> <p><input class="form-control" id="contactname" name="contactname" type="text"></p> </form> </div> <div class="col-md-6"> <h4>email address</h4> <p><input class="form-control" id="contactemail" name="contactemail" type="email"></p> </div> <div class="col-md-12"> <h4>tell operation</h4> <textarea class="form-control" cols="20" id= "contactmessage" name="contactmessage" rows="7"> </textarea> </div> </div> </div> <div class="modal-footer"> <button class="btn-u btn-u-default" data-dismiss="modal" type="button">close</button> <button class="btn-u" id= "contactsubmit" name="contactsubmit">send message <i class= "icon-spinner icon-spin" id="contactspinner" style= "display:none;"></i></button> <div class="alert alert-success" id="messagesuccess" style= "display:none;"> <button class="close" data-dismiss="alert" type= "button">x</button> <strong>thank you!</strong> appreciate comments, , soon. </div> </div> </div> </div> </div><!-- end of pop-up --> i tried adding code modal form twice , adding ids reference them in button section had no luck... ideas?
you need update data-target unique each modal , match id of corresponding modal form.
button launch first modal:
<div class="pricing-contact"> <button data-target="#modal-1" data-toggle="modal">contact us</button> </div> first modal
<div class="modal fade" id="modal-1" tabindex="-1"> </div> button launch second modal:
<div class="pricing-contact"> <button data-target="#modal-2" data-toggle="modal">contact us</button> </div> second modal
<div class="modal fade" id="modal-2" tabindex="-1"> </div> and don't need type="submit" in these buttons
Comments
Post a Comment