Как сделать так, чтобы 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
источник

Как сделать так, чтобы Twitter загружался модально в полноэкранном режиме

Ответы:

Bootstrap v4

Bootstrap v3