Закрытие Bootstrap modal onclick

Я использую мода Bootstrap для пользователей, чтобы выбирать параметры продукта, прежде чем добавлять товар в свою корзину. Я использовал их раньше в этом сценарии без проблем, но этот не закрывается, как ожидалось.

Когда пользователь нажимает кнопку "Добавить в корзину", происходит несколько вещей, и я думаю, что там лежит проблема. Во-первых, некоторые script проверяют правильность заполнения определенных полей. После того, как все будет проверено, пользователю будет разрешено добавить товар в корзину, после чего появится новое окно для просмотра содержимого корзины и выберите либо перейти в корзину, либо продолжить, где они остановились.

Я хочу, чтобы модальное окно закрывалось после нажатия кнопки "Добавить в корзину", после того, как script проверил, что все поля заполняются по мере необходимости. В настоящее время он просто сидит там, и если пользователь решает продолжить, где они остановились, а другое окно закрывается, оно все еще там.

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 для проверки полей:

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

Ответ 1

Закройте окно модального кода, используя javascript

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

Ответ 2

Если тег кнопки находится внутри элемента div, который содержит модальный, вы можете сделать что-то вроде:

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

Ответ 3

Вы можете скрыть модальное и всплывающее окно для просмотра телег в самой функции validateShipping().

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

Ответ 4

Закройте модальный метод универсальным $().hide():

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