Wymyśliłem „responsywne” rozwiązanie dla trybów pełnoekranowych:
Tryby pełnoekranowe, które można włączyć tylko w niektórych punktach przerwania . W ten sposób modal będzie wyświetlał się „normalnie” na szerszych (komputerowych) ekranach oraz w trybie pełnoekranowym na mniejszych (tablety lub telefony komórkowe) ekrany , dając wrażenie aplikacji natywnej.
Wdrożony dla Bootstrap 3 i Bootstrap 4 .
Bootstrap v4
Powinien działać następujący kod ogólny:
.modal {
padding: 0 !important; // override inline padding-right added from js
}
.modal .modal-dialog {
width: 100%;
max-width: none;
height: 100%;
margin: 0;
}
.modal .modal-content {
height: 100%;
border: 0;
border-radius: 0;
}
.modal .modal-body {
overflow-y: auto;
}
Dołączając poniższy kod scss, generuje następujące klasy, które należy dodać do .modal
elementu:
+---------------+---------+---------+---------+---------+---------+
| | xs | sm | md | lg | xl |
| | <576px | ≥576px | ≥768px | ≥992px | ≥1200px |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen | 100% | default | default | default | default |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-sm | 100% | 100% | default | default | default |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-md | 100% | 100% | 100% | default | default |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-lg | 100% | 100% | 100% | 100% | default |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-xl | 100% | 100% | 100% | 100% | 100% |
+---------------+---------+---------+---------+---------+---------+
Kod scss to:
@mixin modal-fullscreen() {
padding: 0 !important; // override inline padding-right added from js
.modal-dialog {
width: 100%;
max-width: none;
height: 100%;
margin: 0;
}
.modal-content {
height: 100%;
border: 0;
border-radius: 0;
}
.modal-body {
overflow-y: auto;
}
}
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-down($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.modal-fullscreen#{$infix} {
@include modal-fullscreen();
}
}
}
Demo na Codepen: https://codepen.io/andreivictor/full/MWYNPBV/
Bootstrap v3
Na podstawie wcześniejszych odpowiedzi na ten temat (@Chris J, @kkarli) następujący kod ogólny powinien działać:
.modal {
padding: 0 !important; // override inline padding-right added from js
}
.modal .modal-dialog {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.modal .modal-content {
height: auto;
min-height: 100%;
border: 0 none;
border-radius: 0;
box-shadow: none;
}
Jeśli chcesz używać responsywnych modali pełnoekranowych, użyj następujących klas, które należy dodać do .modal
elementu:
.modal-fullscreen-md-down
- tryb jest pełnoekranowy dla ekranów mniejszych niż 1200px
.
.modal-fullscreen-sm-down
- tryb jest pełnoekranowy dla ekranów mniejszych niż 922px
.
.modal-fullscreen-xs-down
- tryb jest pełnoekranowy dla ekranu mniejszego niż 768px
.
Spójrz na następujący kod:
/* 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;
box-shadow: none;
}
}
/* 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;
box-shadow: none;
}
}
/* 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;
box-shadow: none;
}
}
Demo jest dostępne na Codepen: https://codepen.io/andreivictor/full/KXNdoO .
Ci, którzy używają Sass jako preprocesora, mogą skorzystać z następującego połączenia:
@mixin modal-fullscreen() {
padding: 0 !important; // override inline padding-right added from js
.modal-dialog {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.modal-content {
height: auto;
min-height: 100%;
border: 0 none;
border-radius: 0;
box-shadow: none;
}
}
margin: 0
do.modal-dialog
.