Bootstrap Modal не работает, но modal-sm -

Question

У меня есть bootstrap modal-sm, который я создал, но теперь я хочу изменить его на обычный модальный с большей шириной.

Когда я удаляю класс «modal-sm» и заменяю его «модальным», фон становится темнее, но фактический модал не отображается.

Если я вручную загляну в веб-инспектор и снял флажок «display: none» на .modal, я могу увидеть правильное модальное всплывающее окно.

Любые идеи, почему это не работает, как это должно делать?

<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

Вы должны удалить .modal-sm из внутреннего div - Как и в:

<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