Bootstrap modal в центре экрана

Question

Я пытался показать модальный на своем сайте с помощью Bootstrap 3. приведенный ниже код скопирован с сайта начальной загрузки и работает.

Когда модальные шоу отображаются в верхней части экрана - возможно ли отобразить его прямо в центре?

<div id="modal" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
      </div> 
      <div class="modal-body"> 
       ... 
      </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> 
    </div> 
</div> 

Благодаря

Answer 1

Да, просто добавьте этот класс в CSS:

.modal-dialog { 
    margin-right: 0; 
    margin-top: your desired value ; 
} 

надеюсь, что это поможет вам

Answer 2

В идеале он должен, но если есть какие-либо проблемы, вы можете использовать эту функцию Я догадываюсь, что содержание модального будет динамичным, поэтому можно написать это.

var h = ($('.modal').height())/2; 
$('.modal').css({'top':'50%','margin-top':'-'+h+'px'}); 

Answer 3

#modal { 
    margin: 0 auto; 
} 

Один из лучших способов для визуализации модальное является создание отдельного частичного файла, содержащего весь код модальной (как показано в этом вопросе) внутри него, а затем дата-тумблер на идентификатор, Div в как обычно.

По умолчанию ваш модальный шрифт должен появиться в центре макета страницы. Но если это не так, то мой вышеприведенный код должен сделать трюк.

Если все же это не означает, что ваши классы div где-то переопределяются. DO Осмотрите элемент (щелкните правой кнопкой мыши + элемент проверки) на вашем модальном модуле и проверьте, какие классы CSS конфликтуют с положением вашего модала.

Чтобы загрузить страницу из внешнего файла, как вы просили:

1) Сначала нужно создать внешний файл/частичный, содержащий все модальный код и сохранить его как _terms_and_conditions.html.erb (Примечание: ID важно)

<div class="modal fade" id="e-terms" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </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> 
    </div> 
</div> 

2) Теперь позвони, что внешний файл, который вы только что создали при щелчке ссылки, как этот

<a data-target="#e-terms" data-toggle="modal" type="button">Terms and conditions</a> 

Мы просто вставляем этот фрагмент модального кода в другой файл и вызываем весь этот файл. Это его! Способ создания файла может зависеть от используемого вами языка (поскольку вы нигде не упомянули его). Но важным моментом является нацеливание идентификатора модального кода на то, записано ли оно в том же файле или в другом файле.