莫代爾在背景上不能正確關閉

Question

打開模式時出現問題我可以通過關閉按鈕或X按鈕關閉它，但是也想在背景上關閉它。背景將關閉模式。但是，當我點擊另一個項目來打開另一個模式時，之前僅通過背景關閉的模式將僅顯示。

<div class="modal fade details-1 " id="details-modal" tabindex="-1" role="dialog" aria-label="details-1" aria-hidden="true" data-dismiss="modal"> 
     <div class="modal-dialog modal-lg"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button class="close" type="button" onclick="close_modal();" aria-label="Close"> 
         <span aria-hidden="true">&times;</span> 
        </button> 
        <!-- all going to be dynamic later --> 
        <h4 class="modal-title" class="text-center"><?php echo $product['title']; ?></h4> 
       </div> 
       <div class="modal-body"> 
        <!-- we are going to put container fluid inside the modal body so we can 
        give it cols --> 
        <div class="container-fluid"> 
         <div class="row"> 
          <span id="modal_errors" class="bg-danger"></span> 
          <div class="col-sm-6 fotorama" data-nav="thumbs"> 
            <?php $photos = explode(',',$product['image']); 
          foreach($photos as $photo): ?> 
             <img src="<?= $photo; ?>" alt="<?= $product['title'] ?>" class="details img-responsive auto"> 
             <?php endforeach; ?> 

          </div> 
          <div class="col-sm-6"> 
           <h4>Details</h4> 
           <p><?= nl2br($product['description']); ?></p> 
           <hr> 
           <p>Price: &pound;<?= $product ['price']; ?></P> 
            <p>Brand: <?= $brand['brand']; ?></p> 
           <form action="add_cart.php" method="post" id="add_product_form"> 
            <input type="hidden" name="product_id" id="product_id" value="<?=$id;?>"> 
            <input type="hidden" name="available" id="available" value=""> 
            <div class="form-group"> 
             <!-- Allows us to control width of input --> 
            </div> 
            <div class="form-group"> 
             <label for="size">Size: </label> 
             <select name="size" id="size" class="form-control">Size 
              <option value=""></option> 
              <?php foreach($size_array as $string) { 
               $string_array = explode(':', $string); 
               $size = $string_array[0]; 
               $available = $string_array[1]; 
               if($available > 0){ 
               echo '<option value="'.$size.'" data-available="'.$available.'">'.$size.' ('.$available.' Available)</option>'; 
               } 
              } ?> 
             </select> 
            </div><br><br> 
            <div class="col-xs-3 pull-right"> 
             <label for="quantity">Qty: </label> 
             <input type="number" class="form-control" id="quantity" name="quantity" min="0"> 
            </div><div class="col-xs-9"></div> 
           </form> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="modal-footer"> 
        <button class="btn btn-default" onclick="close_modal();">Close</button> 
        <button class="btn btn-deafault" type="submit" onclick="add_to_cart();return false;"><span class="glyphicon glyphicon-shopping-cart"></span>Add to Cart</button> 
       </div> 
      </div> 
     </div> 
    </div> 
    function close_modal() { 
    jQuery('#details-modal').modal('hide'); 
    setTimeout(function() { 

     jQuery('#details-modal').remove(); 
     jQuery('.modal-backdrop').remove(); 
    },300); 
} 

Answer 1

你不應該需要編寫自己的邏輯點擊X或背景時關閉模式，Twitter的引導確實在默認情況下，只要你有你的HTML標記正確。

刪除onclick處理函數和close_modal函數，如果需要修復標記的參考，可以在twitter bootstrap documentation for modals的同一頁上找到多個模態的工作示例。

Answer 2

這就是你需要關閉模式。只需將其綁定到事件即可。

jQuery('#details-modal').modal('hide');