我正在使用Bootstrap模态,供用户在将商品添加到购物车之前选择产品选项。在这种情况下,我之前曾使用过它们,但没有出现任何问题,但是这个并没有按预期完成。

当用户单击“添加到购物车”按钮时,发生了一些事情,我认为问题就在这里。首先,一些脚本检查某些字段是否已正确完成。一旦全部验证完毕,便允许用户将商品添加到他们的购物车中,此时会弹出另一个窗口供他们查看其购物车内容,然后选择继续购物车或从他们停下的地方继续。

我希望在脚本确认所有字段均已根据需要填写后,点击“添加到购物车”按钮后,模式窗口会关闭。当前,它只是坐在那里,如果用户选择从他们上次停下的地方继续,而另一个窗口关闭,则它仍在那儿。

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

最佳答案

使用javascript关闭模式框

$('#product-options').modal('hide');
使用javascript打开模式框
$('#product-options').modal('show');
使用javascript切换模式框
$('#myModal').modal('toggle');
如果它是打开的,则意味着关闭模态,反之亦然。

关于javascript - 关闭Bootstrap模态onclick,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19588983/

10-12 07:39
查看更多