web-dev-qa-db-fra.com

Clôture Bootstrap onclick modal

J'utilise un modal Bootstrap pour que les utilisateurs choisissent les options du produit avant d'ajouter un article à leur panier. Je les ai déjà utilisés dans ce scénario sans problème, mais celui-ci ne se ferme pas comme prévu .

Lorsqu'un utilisateur clique sur le bouton "Ajouter au panier", certaines choses se produisent et je pense que le problème est là. Tout d'abord, certains scripts vérifient que certains champs ont été correctement remplis. Une fois que tout est vérifié, l'utilisateur est autorisé à ajouter l'article à son panier, auquel cas une autre fenêtre apparaît pour lui permettre d'examiner le contenu de son panier et de choisir de passer au panier ou de continuer là où il s'était arrêté.

Je voudrais que la fenêtre modale se ferme une fois que le bouton "Ajouter au panier" est cliqué, une fois que le script a vérifié que tous les champs sont remplis si nécessaire. Actuellement, il se trouve juste là et si l'utilisateur choisit de continuer là où il s'était arrêté et que l'autre fenêtre se ferme, elle est toujours là.

HTML pour 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 pour vérifier les champs:

<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>
javascriptjqueryhtmltwitter-bootstrapmodal-dialog
11
Zipotontic

Fermez la boîte modale en utilisant javascript

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

Si la balise button est à l'intérieur de l'élément div qui contient le modal, vous pouvez faire quelque chose comme:

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

Vous pouvez masquer le modal et faire apparaître la fenêtre pour revoir les chariots dans la fonction validateShipping () elle-même.

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