Как установить twitter bootstrap modal шире и выше?

Question

Как установить твитер-бутстрап, модальный, шире и выше?

Пример здесь (пожалуйста, нажмите: Запуск демо-модальный):

http://twitter.github.com/bootstrap/javascript.html#modals

Answer 1

Если модальный идентификатор "myModal"

Вы можете попробовать добавить стиль как:

#myModal 
{ 
    width: 700px; 
    margin-top: -300px !important; 
    margin-left: -350px !important; 
} 

#myModal .modal-body { 
    max-height: 525px; 
} 

Answer 2

С CSS:

.modal { 
    width: 900px; 
    margin-left: -450px; // half of the width 
} 

Answer 3

В файле CSS, добавьте новое определение класса:

.higherWider { 
    width:970px; 
    margin-top:-250px; 
} 

В вашем HTML, добавьте higherWider внутри строки класса для модального:

<div class="modal hide fade higherWider"> 

Answer 4

Для размера в%, вы могли бы сделать это:

.modal-body 
{ 
    max-height:80%; 
} 
.modal 
{ 
    height:80%; 
    width:70%; 
    margin-left: -35%; 
} 
@media (max-width: 768px) { 
    .modal 
    { 
    width:90%; 
     margin-left: 2%; 
    } 
} 

Answer 5

В Bootstrap 3.1.1 они добавили modal-lg и modal-sm классы. Вы управляете размером modal с помощью @media запросов, подобных им. Это более глобальный способ управления размером modal.

@media (min-width: 992px) { 
    .modal-lg { 
     width: 900px; 
     height: 900px; /* control height here */ 
    } 
} 

Пример кода:

<!-- Large modal --> 
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button> 

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
     ... 
    </div> 
    </div> 
</div> 

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

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-sm"> 
    <div class="modal-content"> 
     ... 
    </div> 
    </div> 
</div> 

Answer 6

либо из следующих решений работали для меня:

1. Применение style="width: 50%; height:50%;" к div в модальном секции с class="modal-dialog" как так

   <div class="modal-dialog" style="width: 50%; height:50%;"> 
   

   или

2. Создание раздела стиль, как так

   #themodal .modal-dialog{ width:50%; height:50%;} 
   

Answer 7

Самый простой способ сделать это состоит в использовании .modal-LG. Добавьте его в модальном-диалоге класса в пределах модального контейнера таким образом:

<div class="modal fade"> 
    <div class="modal-dialog modal-lg" role="document"> 
      <div class="modal-content"> 
       I am now wider! 
      </div> 
    </div> 
</div> 

Answer 8

изменяющая модель класс-диалог сделал трюк для меня

.modal-dialog { 
    width: 90%; 
} 

Answer 9

Принятого ответ работает хорошо, но я бы рекомендовал использовать а не поля. Таким образом, вы сохраняете функциональность увольнения при нажатии вне модального диалога.

#myModal { 
    width: 700px; 
    padding-top: -300px !important; 
    padding-left: -350px !important; 
} 

#myModal .modal-body { 
    max-height: 525px; 
}