Как сделать Twitter bootstrap модальным полноэкранным

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

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

7 ответов


Я достиг этого в 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 справа в режиме реального времени, пока не получите нужное заполнение / интервал.

здесь это демо

вот ссылка на скрипку


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

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

.modal-content {
  height: 99%;
}

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

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

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


на фрагмент у @Chris 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;
}

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

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

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

.modal-content {
  height: 99%;
}

вам нужно установить теги 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>

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

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

Я создал следующие классы, которые необходимо добавить к .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;
  } 
}

/* 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;
  }

}