我正在使用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>
最佳答案
使用javascript关闭模式框
$('#product-options').modal('hide');
使用javascript打开模式框$('#product-options').modal('show');
使用javascript切换模式框$('#myModal').modal('toggle');
如果它是打开的,则意味着关闭模态,反之亦然。关于javascript - 关闭Bootstrap模态onclick,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19588983/