我正在使用Bootstrap模态框让用户在将商品添加到购物车之前选择产品选项。以前在这种情况下我已经用过它们并没有问题，但是这次它没有像预期的那样关闭。
当用户点击“添加到购物车”按钮时，会发生一些事情，我认为问题就出在那里。首先，某些脚本会检查是否正确填写了特定字段。一旦所有内容都经过验证，用户就可以将项目添加到购物车中，在此时另一个窗口弹出供他们查看购物车内容，并选择继续或去往购物车。
我希望模态窗口在“添加到购物车”按钮被点击后关闭，此时脚本已经验证所有必填字段都已填写。目前，它只是停留在那里，如果用户选择继续操作，在其他窗口关闭后，模态框仍然存在。
模态框的HTML：
<a type="button" class="btn btn-small btn-primary" href="#product-options" data-toggle="modal"><i class="icon-shopping-cart icon-white"></i> Buy This!</a>
<div class="modal hide fade" id="product-options">
<div class="modal-header center">
<a class="close modal-close l-m" data-dismiss="modal" aria-hidden="true">x</a>
<h2 class="modal-header">When, Where and How?</h2>
</div>
<div class="modal-body ll-m r-m">
<h5 class="top-m">Please Choose From Delivery Options:</h5>
<label for="Standard">
<input id="Standard" type="radio" name="properties[Delivery]" value="Standard Shipping" />
<h5>Standard Shipping</h5><br />
<p><small>Earliest Date of Delivery:
<span id="delivery-date"></span></small></p>
</label>
<label for="datepicker" style="margin-left: 18px;">Desired Delivery Date: </label>
<input id="datepicker" type="text" placeholder="ex. 01/01/2013" name="properties[Delivery Date]" style="margin-left: 18px;" readonly/>
<h5>Please verify your age:</h5>
<input type="hidden" name="properties[age_verified]" value=""/>
<label for="age_verification">
<input id="age_verification" type="checkbox" name="properties[Age Verified]" value="Yes" required="required" />
<p class="center-text"><small>This gift contains alcohol. By checking this box you certify you are 21yrs of age or older. An adult signature with ID will be required upon delivery.</small></p>
</label>
</div> <!-- end of modal body -->
<div class="modal-footer">
<div class="btn-group fr">
<button class="btn btn-small" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button href="#" id="addtocart" class="btn btn-small btn-warning" onclick="return validateShipping();">Add To Cart</button>
</div>
</div><!-- end of modal footer -->
</div> <!-- end of modal -->
检查字段的脚本：
<script>
// Hides shipping info fieldset if ship to billing is checked
$(function () {
$("#ship_to_billing").change(function () {
if ($(this).is(":checked")) $("#shipping_info").hide();
else $("#shipping_info").show();
});
});
// Validates address fields are filled out unless ship to billing is checked...
function validateShipping() {
if (!$("#ship_to_billing").is(":checked")) {
var inputs = $("#shipping_info input");
var ready = true;
inputs.each(function () {
if ($(this).val() == '') {
ready = false;
return false;
}
});
if (!ready) {
alert("Oops! Something's missing! Either choose 'Ship to My Billing Address' or all of the Recipient Name and Shipping Address fields must be completed. Thanks!");
return false;
}
}
// Makes sure age verification is checked
if (!$('#age_verification').is(':checked')) {
alert("Please verify you are 21 years of age or older.");
return false;
}
// Confirms province is allowed for wine shipping
var states = ["AK", "AZ", "CA", "CO", "CT", "FL", "GA", "HI", "ID", "IL", "IN", "IA", "KS", "LA", "ME", "MD", "MI", "MN", "MO", "NE", "NV", "NH", "NJ", "NM", "NY", "NC", "ND", "OH", "OR", "SC", "TN", "TX", "VT", "VA", "WA", "WV", "WI", "WY", ""];
if ($.inArray($("#address_province").val().toUpperCase(), states) <0) {
alert("Shipping gifts containing alcohol to this state is prohibited by law. Please choose another item.");
return false;
}
return true;
}
</script>