Как сделать так, чтобы 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
КСТАТИ: .modal-contentразрыв высоты, когда содержимое переполняется внизу и прокручивается вниз. Должно бытьmin-height: 100%; height: auto;
— Яник Рошон
3
Если вы разрабатываете мобильное приложение, вы можете поместить CSS Криса в медиа-запрос, чтобы иметь нормальную модальную ширину для более широких экранов @media (max-width: 768px) {...}
— Николас Конно
Вы также можете добавить .modal {padding: ... px}, если вам нужен «почти» полноэкранный модальный режим
— andrii
8
.modal-dialogтакже нуждается max-width: 100%;в начальной загрузке 4
— Ананд Рокзз
25

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

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

.modal-content {
  height: 99%;
}
— Esteban
источник
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, который с ним связан.

— micjamking
источник
что такое .fullscreen? Я включил CSS в #myModal, он работал для ширины, но не для высоты.
— Гришикеш Сардар
.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;
}
— kkarli
источник
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%;
}
— Dementic
источник
-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
Постарайтесь объяснить более четко, почему это ответ на вопрос.
— Йерун Хейер
-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
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.