Как сделать, чтобы модальное окно было на весь экран?

Question

[Ivan Stroykin]

Доброго времени суток,

Выпито уже больше 3-х чашек кофе, а проблемку с модальным окном все не могу решить :)
Осталась надежда на ваш бесконечный интеллект и пинок в мою сторону...
Главный вопрос, почему не срабатывает bottom: 20px; хотя окну присвоено position: fixed;
Окно должно быть на весь экран с отступами в 20px

В общем вот вырезка из проекта: codepen.io/StivinKing/pen/zqEady

А Бонусный вопрос, надеюсь лишь на ваше сострадание и поддержку:
- когда закрываешь окно, иконка закрытия пропадает но после появляется на секунду.

Answer 1

[Никита]

Попробуйте использовать width: calc(100% - 40px) и сделайте left: 20px
Поможет сделать фулскрил, аналогично для ширины сделать

Comments

[Ivan Stroykin]

Возможно как-то не так делаю, но у меня ничего не меняется от этого. Я ведь правильно вас понял, к классу "modal" это применять? Самое интересное, что если в инспекторе элементов выбрать класс "modal" и посмотреть что он занимает. Он занимает все правильно, но высота уменьшена. Не могу понять из-за чего это :(

[Никита]

Иван Стройкин: db-mb.ru/portfolio/toster
Можете посмотреть принцип

[Никита]

Иван Стройкин: решение кстати проще чем выше, и короче=)

[Ivan Stroykin]

Никита: Так вся соль в том, что я просто навсего не тому классу стили "на весь экран" прописал))

[Ivan Stroykin]

Никита: Спасибо :)

Answer 2

[Роман Дворянов]

Ваше модальное окно зависит от контента. Прям сразу подсказать как это лечить не могу, но вот не совсем решение, скорее костыль, но

.modal-inset {
  min-height: 75%;
}

Вот так работает, кстати -

.modal-inset {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    min-height: 0;
}

Comments

[Ivan Stroykin]

ай, вот я дурак)) Спасибо большое. Я сделал размер на весь экран для класса "modal" и он работает хорошо. А вся "красота" стилей сидят на "modal-inset". Капец) Премного благодарен :)

[Ivan Stroykin]

А насчет иконки "Закрыть", которая после закрытия самого модального окна появляется вновь на ~1 секунду. Не знаетесь источник проблемы?)

[Роман Дворянов]

Иван Стройкин: Не, там какое-то очень крутое кунг-фу с нестандартными ивентами

[Ivan Stroykin]

Роман Д.: Вы и так сильно помогли. Сейчас налью еще чашечку кофе и все сделаю :) Спасибо еще раз