ブートストラップモーダルは動作しませんがモーダルsmは

Question

私は作成したブートストラップモーダルsmを持っていますが、今はより広い幅の通常のモーダルに変更したいと思います。

'modal-sm'クラスを削除して 'modal'だけで置き換えると、背景は暗くなりますが、実際のモーダルは表示されません。

手動でウェブインスペクタにアクセスし、.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