Bootstrap Modal不工作，但模式sm是

Question

我有一個引導模式SM，我已經做了，但現在我想改變它爲一個更大的寬度正常模態。

當我刪除類'modal-sm'並替換爲'模態'時，背景會變暗，但實際的模態不顯示。

如果我手動進入Web檢查器並取消選中.modal上的「display：none」，我可以看到正確的模態彈出。

任何想法，爲什麼這不像它應該這樣做？

<a href="#" data-toggle="modal" data-target=".modal-gallery-<?= $shoots[1]['id'] ?>">Buy Gallery</a> 


<!-- MODALS --> 
<div class="modal fade modal-gallery-<?= $shoots[1]['id'] ?> in" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> 
<div class="modal-dialog modal"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 
     </div> 
     <div class="modal-body downloads"> 
      <div class="buttons"> 
       <div class="form-group"> 
        <h2>test</h2> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</div> 

Answer 1

你需要從內div刪除.modal-sm - 如：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<!-- Small modal --> 
 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">regular modal</button> 
 

 
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> 
 

 
<!-- remove modal-sm from here to get normal size --> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Small size</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div><!-- /.modal-content --> 
 
    </div> 
 
</div>

來源：Bootstrap Documentation