Как сделать Twitter bootstrap modal full screen

Question

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-body"> 
    <%= image_tag "Background.jpg" %> 
    </div> 
</div> 

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

Answer 1

Я достиг этого Bootstrap 3 со следующим кодом:

.modal-dialog { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

.modal-content { 
    height: auto; 
    min-height: 100%; 
    border-radius: 0; 
} 

В общем, когда у вас есть вопросы по поводу вопросов, разнос/отступов, попробуйте правой + клик (или Cmd + нажав на макинтош) элемент и выберите «проверить элемент» в Chrome или «проверить элемент с firebug» в Firefox. Попробуйте выбрать различные элементы HTML на панели «elements» и отредактировать CSS справа в режиме реального времени, пока не получите требуемое дополнение/интервал.

Here is a live demo

Here is a link to the fiddle

Answer 2

Следующий класс будет делать модальный полноэкранный в Bootstrap:

.full-screen { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    top: 0; 
    left: 0; 
} 

я не уверен, как структурировано внутреннее содержание вашего модальный, это может оказать влияние на общую высоту в зависимости от связанный с ним CSS.

Answer 3

Выбранное решение не сохраняет круглый стиль углу. Чтобы сохранить круглые углы, вы должны уменьшить ширину и высоту немного и удалить радиус границы 0. Кроме того, он не показывает вертикальную полосу прокрутки ...

.modal-dialog { 
    width: 98%; 
    height: 92%; 
    padding: 0; 
} 

.modal-content { 
    height: 99%; 
} 

Answer 4

Вам нужно установить DIV как показано ниже.

Найти более подробную информацию>http://thedeveloperblog.com/bootstrap-modal-with-full-size-and-scrolling

</style> 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 
    More Details 
</button> 
</br> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-content"> 
     <div class="container">; 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h3 class="modal-title" id="myModalLabel">Modal Title</h3> 
      </div> 
       <div class="modal-body" > 
       Your modal text 
       </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div>          
</div> 

Answer 5

snippet от J @ Крис были некоторые проблемы с полями и перелива. Предлагаемые изменения @YanickRochon и @Joana, основанные на fiddel от @Chris J, можно найти в следующем jsfiddle.

Вот код CSS, который работал для меня:

.modal-dialog { 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 
.modal-content { 
    height: 100%; 
    min-height: 100%; 
    height: auto; 
    border-radius: 0; 
} 

Answer 6

на основе предыдущих ответов на эту тему (J @ Крис, @kkarli), я придумал «отзывчивым» решение для полноэкранных модальностей :

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

Я создал следующие классы, которые должны быть добавлены к .modal элементу:

• .modal-fullscreen-md-down - модальный является Fullscreen для экранов меньшего размера, чем 1200px.
• .modal-fullscreen-sm-down - модальный полноэкранный режим для экранов размером менее 922px.
• .modal-fullscreen-xs-down - модальный полноэкранный режим для экрана, меньшего, чем 768px.

Взгляните на следующий код:

/* Extra small devices (less than 768px) */ 
@media (max-width: 767px) { 
    .modal-fullscreen-xs-down { 
    padding: 0 !important; 
    } 
    .modal-fullscreen-xs-down .modal-dialog { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    } 
    .modal-fullscreen-xs-down .modal-content { 
    height: auto; 
    min-height: 100%; 
    border: 0 none; 
    border-radius: 0; 
    } 
} 

/* Small devices (less than 992px) */ 
@media (max-width: 991px) { 
    .modal-fullscreen-sm-down { 
    padding: 0 !important; 
    } 
    .modal-fullscreen-sm-down .modal-dialog { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    } 
    .modal-fullscreen-sm-down .modal-content { 
    height: auto; 
    min-height: 100%; 
    border: 0 none; 
    border-radius: 0; 
    } 
} 

/* Medium devices (less than 1200px) */ 
@media (max-width: 1199px) { 
    .modal-fullscreen-md-down { 
    padding: 0 !important; 
    } 
    .modal-fullscreen-md-down .modal-dialog { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    } 
    .modal-fullscreen-md-down .modal-content { 
    height: auto; 
    min-height: 100%; 
    border: 0 none; 
    border-radius: 0; 
    } 
} 

---

Демо доступно на Codepen: https://codepen.io/andreivictor/full/KXNdoO.

---

Те, кто использует Sass как препроцессор может воспользоваться следующем Mixin:

@mixin modal-fullscreen() { 
    padding: 0 !important; 

    .modal-dialog { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    } 

    .modal-content { 
    height: auto; 
    min-height: 100%; 
    border: 0 none; 
    border-radius: 0; 
    } 

} 

Answer 7

Для начальной загрузки 4 я должен добавить медиа-запрос с максимальной шириной: отсутствует

@media (min-width: 576px) { 
    .modal-dialog { max-width: none; } 
} 

.modal-dialog { 
    width: 98%; 
    height: 92%; 
    padding: 0; 
} 

.modal-content { 
    height: 99%; 
}