Любая идея для модального всплывающего окна в режиме рабочего стола на новую страницу в мобильном представлении

Question

У меня есть требование отображать всплывающее окно, отображаемое в представлении «Рабочий стол», для изменения на новую страницу в представлении для мобильных устройств.Есть идеи?

Answer 1

Лучшее, что вы можете сделать, это, вероятно, сделать так, чтобы модал занимал весь экран на мобильном телефоне, используя положение: абсолютное и установив верхний, правый, нижний и левый до 0.

.modal {
  background: green;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

@media(min-width: 800px) {
  .modal {
    top: 20%;
    bottom: 40%;
    left: 20%;
    right: 20%;
  }
}

<div class="modal">hi</div>

Answer 2

Использование css для перепроектирования модального режима в мобильном представлении - это вариант, который я рекомендую. Чтобы сделать это, вам понадобятся некоторые знания о медиазапросах в css. Поэтому вам придется использовать медиазапросы для повторной настройки ширины.и высота и пропорция его содержимого на мобильном устройстве.Для получения дополнительной информации о медиа-запросах CSS посетите этот сайтhttps://www.codecademy.com/learn