我正在使用 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>