Як зробити Twitter завантажувальний повний екран

160

<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, але не зміг отримати його так, як хотів. Хто-небудь, будь ласка, допоможе мені з цим

css twitter-bootstrap

— Хришикеш Сардар
джерело

280

Я досяг цього в Bootstrap 3 із таким кодом:

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

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

Загалом, коли у вас виникають питання щодо проблем з інтервалом / прокладкою, спробуйте клацнути правою кнопкою миші + (або cmd + натисканням на mac) і виберіть "перевірити елемент" у Chrome або "оглянути елемент за допомогою firebug" на Firefox. Спробуйте вибрати різні елементи HTML на панелі "елементи" та відредагуйте CSS праворуч у режимі реального часу, поки не отримаєте потрібне прокладки / інтервали.

Ось демонстрація наживо

Ось посилання на загадку

— Кріс Дж
джерело

12

Я б також додати margin: 0до .modal-dialog.

— harrison4

10

BTW: .modal-contentперерва висоти, коли вміст переливається внизу і прокручується вниз. Має бутиmin-height: 100%; height: auto;

— Янік Рошон

3

Якщо розробляєте мобільний додаток, ви можете помістити Кріс Кріса всередині медіа-запиту, щоб мати нормальну модальну ширину для ширших екранів @media (max-width: 768px) {...}

— Nicolas Connault

Ви також можете додати .modal {padding: ... px}, якщо вам потрібен "майже" повноекранний модальний режим

— andrii

8

.modal-dialogтакож необхідно max-width: 100%;для початкового завантаження 4

— Anand Rockzz

25

Обране рішення не зберігає стиль круглого кута. Щоб зберегти круглі кути, слід трохи зменшити ширину та висоту та прибрати радіус межі 0. Також на ньому не відображається вертикальна смуга прокрутки ...

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

.modal-content {
  height: 99%;
}

— Естебан
джерело

1

точніша відповідь, яка зберігає відчуття моделі із закругленими кутами, прийнята відповідь представляє шар накладання замість модального

— Clain Dsilva

Якщо модал займає весь екран, це виглядатиме жахливо (ІМХО), якщо навколо вас круглі кути.

— Дементік

16

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

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

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

.modal-content {
  height: 99%;
}

— А. Морель
джерело

16

Я придумав "чуйне" рішення для повноекранного режиму:

Повноекранні режими, які можна вмикати лише в певних точках перерви . Таким чином модал буде відображати "нормальний" на ширших (настільних) екранах та повноекранних екранах на менших (планшетних або мобільних) екранах , створюючи відчуття нативного додатка.

Реалізовано для Bootstrap 3 та Bootstrap 4 .

Bootstrap v4

Наступний загальний код повинен працювати:

.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;
}

Включивши код scss нижче, він генерує такі класи, які потрібно додати до .modalелемента:

+---------------+---------+---------+---------+---------+---------+
|               |   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%   |
+---------------+---------+---------+---------+---------+---------+

Код scss:

@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();
    }
  }
}

Демонстрація в Codepen: https://codepen.io/andreivictor/full/MWYNPBV/

Bootstrap v3

На основі попередніх відповідей на цю тему (@Chris J, @kkarli) має працювати наступний загальний код:

.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;
}

Якщо ви хочете використовувати чутливі режими повноекранного режиму, використовуйте наступні класи, які потрібно додати до .modalелемента:

.modal-fullscreen-md-down- повноекранний режим для екранів менше, ніж 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;
    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;
  }
}

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

Ті, хто використовує Sass в якості препроцесора, можуть скористатися наступним вмістом:

@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;
  }

}

— andreivictor
джерело

11

Наступний клас зробить повний екран модалом у Bootstrap:

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

Я не впевнений, як структурований внутрішній вміст вашого модалу, це може вплинути на загальну висоту залежно від CSS, який з ним пов'язаний.

— міцкання
джерело

що таке .повний екран? Я включив css в #myModal, він працював на ширину, але не на висоту.

— Hrishikesh Sardar

.fullscreenце клас, який я створив для вирішення проблеми, він не входить до Bootstrap. Чи можете ви розмістити зразок коду на JSFiddle або CodePen ? Я не можу вам допомогти, не побачивши ваш код.

— micjamking

для додання висоти потрібно додати висоту на корпусі моделі, а не на #myModal.

— QasimRamzan

9

для завантажувальної програми 4

додати класи:

.full_modal-dialog {
  width: 98% !important;
  height: 92% !important;
  min-width: 98% !important;
  min-height: 92% !important;
  max-width: 98% !important;
  max-height: 92% !important;
  padding: 0 !important;
}

.full_modal-content {
  height: 99% !important;
  min-height: 99% !important;
  max-height: 99% !important;
}

та в HTML:

<div role="document" class="modal-dialog full_modal-dialog">
    <div class="modal-content full_modal-content">

— Влад
джерело

7

У фрагмента від @Chris J виникли деякі проблеми з полями та переповненням. Запропоновані зміни @YanickRochon та @Joana, засновані на скрипці від @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;
}

— ккарлі
джерело

2

Потрібно встановити свої теги 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>

— BenW
джерело

-1

Моя варіація рішення: (scss)

  .modal {
        .modal-dialog.modal-fs {
            width: 100%;
            margin: 0;
            box-shadow: none;
            height: 100%;
            .modal-content {
                border: none;
                border-radius: 0;
                box-shadow: none;
                box-shadow: none;
                height: 100%;
            }
        }
    }

(css)

.modal .modal-dialog.modal-fs {
  width: 100%;
  margin: 0;
  box-shadow: none;
  height: 100%;
}
.modal .modal-dialog.modal-fs .modal-content {
  border: none;
  border-radius: 0;
  box-shadow: none;
  box-shadow: none;
  height: 100%;
}

— Дементичний
джерело

-1

.modal.in .modal-dialog {
 width:100% !important; 
 min-height: 100%;
 margin: 0 0 0 0 !important;
 bottom: 0px !important;
 top: 0px;
}


.modal-content {
    border:0px solid rgba(0,0,0,.2) !important;
    border-radius: 0px !important;
    -webkit-box-shadow: 0 0px 0px rgba(0,0,0,.5) !important;
    box-shadow: 0 3px 9px rgba(0,0,0,.5) !important;
    height: auto;
    min-height: 100%;
}

.modal-dialog {
 position: fixed !important;
 margin:0px !important;
}

.bootstrap-dialog .modal-header {
    border-top-left-radius: 0px !important; 
    border-top-right-radius: 0px !important;
}


@media (min-width: 768px)
.modal-dialog {
    width: 100% !important;
    margin: 0 !important;
}

— Аліреза Парс
джерело

2

Спробуйте пояснити більш чітко, чому це відповідь на запитання.

— Jeroen Heier

-1

Використовуй це:

.modal-full {
    min-width: 100%;
    margin: 0;
}

.modal-full .modal-content {
    min-height: 100vh;
}

і так:

<div id="myModal" class="modal" role="dialog">
    <div class="modal-dialog modal-full">
        <!-- Modal content-->
        <div class="modal-content ">
            <div class="modal-header ">                    
                <button type="button" class="close" data-dismiss="modal">&times; 
                </button>
                <h4 class="modal-title">hi</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
        </div>

    </div>
</div>

— hojjat.mi
джерело