Closing Bootstrap modal onclick

Question

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 for modal:

   <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 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>

Answer 1

Close the modal box using javascript

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

Open the modal box using javascript

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

Toggle the modal box using javascript

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

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

Answer 2

如果按钮标记位于包含模态的 div 元素内，您可以执行以下操作：

<button class="btn btn-default" data-dismiss="modal" aria-label="Close">Cancel</button>

Answer 3

You can hide the modal and popup the window to review the carts in validateShipping() function itself.

function validateShipping(){
...
...
$('#product-options').modal('hide');
//pop the window to select items
}

Answer 4

使用通用$().hide()方法关闭模态：

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