Ich verwende ein Bootstrap-Modal, mit dem Benutzer Produktoptionen auswählen können, bevor sie einen Artikel in den Warenkorb legen. Ich habe sie zuvor in diesem Szenario ohne Probleme verwendet, aber dieses schließt nicht wie erwartet.

Wenn ein Benutzer auf die Schaltfläche "In den Warenkorb" klickt, passieren einige Dinge und ich denke, das Problem liegt dort. Zuerst überprüft ein Skript, ob bestimmte Felder korrekt ausgefüllt wurden. Sobald dies alles überprüft ist, kann der Benutzer den Artikel in den Warenkorb legen. Anschließend wird ein weiteres Fenster geöffnet, in dem er den Inhalt des Warenkorbs überprüfen und entweder mit dem Warenkorb fortfahren oder dort weitermachen kann, wo er aufgehört hat.

Ich möchte, dass das modale Fenster geschlossen wird, sobald auf die Schaltfläche "In den Warenkorb" geklickt wird, nachdem das Skript überprüft hat, dass alle Felder bei Bedarf ausgefüllt sind. Derzeit befindet es sich nur dort, und wenn der Benutzer entscheidet, dort fortzufahren, wo er aufgehört hat, und das andere Fenster sich schließt, ist es immer noch da.

HTML für 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 zum Prüfen von Feldern:

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