我在 2 个不同的价格类别下有 2 个不同的联系按钮。我试图做到这一点，以便每个“联系我们”按钮都会打开一个特定于该价格类别的模式表单。
这是我的价格框:
<div class="col-md-3 col-sm-6">
<div class="pricing hover-effect">
<div class="pricing-head">
<h3>Device Testing <span>Great to track gas & electric meter tests, backflow tests and 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 from the 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;"> I Want to 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 for those currently 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;"> I Want to Learn More</a>
<div id=pricing-contact>
<div class="pricing-contact">
<button a href="#professional" data-toggle="modal" data-target="#modal-2" type="submit">Contact Us</button>
</div>
</div>
</div>
</div>
</div>
我用来打开模态窗体的代码是:
<!-- 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 us about your 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> We
appreciate your comments, and will get back to you
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 us about your 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> We
appreciate your comments, and will get back to you
soon.
</div>
</div>
</div>
</div>
</div><!-- End of pop-up -->
我尝试为模态表单添加代码两次，然后添加 id 以在按钮部分引用它们，但我没有运气......有什么想法吗？
最佳答案
您需要更新您的data-target，使其对于每个模态都是唯一的，并与相应模态形式的 id 相匹配。
启动第一个模式的按钮:
<div class="pricing-contact">
<button data-target="#modal-1" data-toggle="modal">Contact Us</button>
</div>
第一个模态
<div class="modal fade" id="modal-1" tabindex="-1">
</div>
启动第二个模式的按钮:
<div class="pricing-contact">
<button data-target="#modal-2" data-toggle="modal">Contact Us</button>
</div>
第二模态
<div class="modal fade" id="modal-2" tabindex="-1">
</div>
而且您不需要在这些按钮中使用type="submit"
关于html - 如何使 2 个按钮引用单独的模态形式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23999855/