关闭 Bootstrap 模态 onclick

问题描述

我正在使用 Bootstrap 模式让用户在将商品添加到购物车之前选择产品选项.我以前在这种情况下使用过它们，没有任何问题，但这个没有按预期关闭.

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.

当用户单击添加到购物车"按钮时，会发生一些事情，我认为问题出在那儿.首先，一些脚本会检查某些字段是否已正确完成.一旦所有这些都得到验证，用户就可以将商品添加到他们的购物车中，此时会弹出另一个窗口，供他们查看购物车内容并选择继续购物车或从他们离开的地方继续.

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:

   <a type="button" class="btn btn-small btn-primary" href="#product-options" data-toggle="modal"><i class="icon-shopping-cart icon-white"></i>&nbsp;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关闭模态框

Close the modal box using javascript

$('#product-options').modal('hide');

使用 javascript 打开模态框

Open the modal box using javascript

$('#product-options').modal('show');

使用 javascript 切换模式框

Toggle the modal box using javascript

$('#myModal').modal('toggle');

表示如果模式打开则关闭模式，反之亦然.

Means close the modal if it's open and vice versa.

这篇关于关闭 Bootstrap 模态 onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！