我在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以在按钮部分引用它们但我没有运气......有什么想法吗？
答案 0 :(得分：0)
您需要将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"
答案 1 :(得分：0)
你是在正确的轨道上添加另一个模态的代码和按钮部分中的ID的引用，但是，ids 是唯一的吗？
这两种模态都不能称为“#responsive”
在可能的情况下使用语义名称也是更好的做法，因此请考虑使用“＃device1”和“＃device2”作为您的两个ID。
这个答案在黑暗中有点像，但我希望它有所帮助：）