Как сделать твист-загрузочный модальный полноэкранный режим

<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, но не смог получить его так, как хотел. Кто-нибудь может помочь мне с этим.

Ответ 1

Я достиг этого в Bootstrap 3 со следующим кодом:

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

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

В общем случае, когда у вас есть вопросы о проблемах с интерполяцией/добавлением, попробуйте щелкнуть правой кнопкой мыши (или cmd + щелчок на макете) и выбрать "проверять элемент" в Chrome или "проверить элемент с помощью firebug" в Firefox. Попробуйте выбрать различные элементы HTML на панели "elements" и отредактировать CSS справа в режиме реального времени, пока не получите требуемое дополнение/интервал.

Вот живая демонстрация

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

Ответ 2

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

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

.modal-content {
  height: 99%;
}

Ответ 3

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

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

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

Ответ 4

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

Ответ 5

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

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

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

.modal-content {
  height: 99%;
}

Ответ 6

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

Ответ 7

Основываясь на предыдущих ответах на эту тему (@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;
  }

}

Ответ 8

Мой вариант решения: (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%;
}

Ответ 9

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