Używam modalnego Bootstrap dla użytkowników, aby wybrać opcje produktu przed dodaniem elementu do koszyka. Użyłem ich wcześniej w tym scenariuszu bez żadnych problemów, ale ten nie zamyka się zgodnie z oczekiwaniami.

Gdy użytkownik kliknie przycisk „Dodaj do koszyka”, dzieje się kilka rzeczy i myślę, że problem tkwi tam. Po pierwsze, niektóre skrypty sprawdzają, czy niektóre pola zostały poprawnie wypełnione. Po tym, jak to wszystko zostanie zweryfikowane, użytkownik może dodać przedmiot do swojego koszyka, w którym to momencie pojawi się kolejne okno, w którym mogą przejrzeć zawartość koszyka i zdecydować się na przejście do koszyka lub kontynuowanie tam, gdzie zostało przerwane.

Chciałbym, aby okno modalne zostało zamknięte po kliknięciu przycisku „Dodaj do koszyka”, po zweryfikowaniu skryptu wszystkie pola zostaną wypełnione, jeśli to konieczne. Obecnie po prostu siedzi i jeśli użytkownik zdecyduje się kontynuować w miejscu, w którym zostało przerwane, a drugie okno zostanie zamknięte, nadal tam jest.

HTML dla modalności:

   <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, aby sprawdzić pola:

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