Закрытие Bootstrap modal onclick

Question

Я использую Bootstrap 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>&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'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

закрыть окно модальным Использование JavaScript

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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