jQuery 关闭 Bootstrap 模态 onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19588983/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Closing Bootstrap modal onclick
提问by Zipotontic
I am using a Bootstrap modal for users to choose product options before adding an item to their cart. I've used them before in this scenario with no issues but this one isn't closing as expected.
我正在使用 Bootstrap 模式让用户在将商品添加到购物车之前选择产品选项。我以前在这种情况下使用过它们，没有出现任何问题，但这个没有按预期关闭。
When a user clicks on the 'Add To Cart' button, a few things happen and I'm thinking the problem lies there. First, some script checks that certain fields have been completed correctly. Once that is all verified, the user is allowed to add the item to their cart at which point another window pops up for them to review their cart content and choose to either proceed to cart or continue where they left off.
当用户单击“添加到购物车”按钮时，会发生一些事情，我认为问题出在那里。首先，一些脚本会检查某些字段是否已正确完成。一旦所有这些都得到验证，用户就可以将商品添加到他们的购物车中，此时会弹出另一个窗口让他们查看购物车内容，然后选择继续购物车或从他们离开的地方继续。
I'd like the modal window to close once the 'Add To Cart' button is clicked, after the script has verified all fields are filled out as necessary. Currently, it just sits there and if the user chooses to continue where they left off and the other window closes, it's still there.
我希望在单击“添加到购物车”按钮后，在脚本验证所有字段都按需要填写后关闭模式窗口。目前，它只是坐在那里，如果用户选择从他们离开的地方继续并且另一个窗口关闭，它仍然在那里。
HTML for modal:
模态的 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 to check fields:
检查字段的脚本：
<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>
回答by Sridhar R
Close the modal box using javascript
使用javascript关闭模态框
$('#product-options').modal('hide');
回答by JPRLCol
If the button tag is inside the div element who contains the modal, you can do something like:
如果按钮标记位于包含模态的 div 元素内，您可以执行以下操作：
<button class="btn btn-default" data-dismiss="modal" aria-label="Close">Cancel</button>
回答by Rohitha
You can hide the modal and popup the window to review the carts in validateShipping() function itself.
您可以隐藏模式并弹出窗口以查看 validateShipping() 函数本身中的购物车。
function validateShipping(){
...
...
$('#product-options').modal('hide');
//pop the window to select items
}
回答by afa 7heaven
Close the modal with universal $().hide()method:
使用通用$().hide()方法关闭模态：
$('#product-options').hide();
