莫代尔在背景上不能正确关闭

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');