web-dev-qa-db-ja.com

閉じるBootstrapモーダルonclick

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

JavaScriptを使用してモーダルボックスを閉じます

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

ボタンタグが、モーダルを含むdiv要素内にある場合、次のようなことができます。

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

モーダルを非表示にし、ウィンドウをポップアップして、validateShipping（）関数自体でカートを確認できます。

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