Задать вопрос
iannkolchina
@iannkolchina
Actions louder than words
html

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

Проблема в том, что при уменьшение экрана по высоте, модальное окно вылезает за окно браузера. Если, задать высоту, например, 85%, тогда выпадает контент из модального окна. Как сделать так, чтобы модальное окно одинакового хорошо отображалось по высоте?

Стандартная высота браузера: 5af3fff08d542275782385.png

Уменьшенная высота браузера:
5af4000d22b2e642166853.png

Html:
<div class="wrapper-form">
            <div class="form-content">
                <h3>Hire <span class="colororange">us</span></h3>
                <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa<br> qui officia deserunt mollit anim id est laborum</p>
                <form action="#" class="form-hireus">
                    <input type="email" class="email-hireus" placeholder="Your Email">
                    <input type="text" class="subject-hireus" placeholder="Subject">
                    <textarea class="textarea-hireus" placeholder="Your Message"></textarea>
                    <input type="submit" class="button button-modal" value="Send Message">
                </form>
                <a href="#" class="btn-close-modal">
                    <img src="assets/img/btn/btn-close-modal.png" alt="close-modal">
                </a>
            </div>
        </div>


CSS:
.wrapper-form {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-color: rgba(59, 67, 76, 0.5);
}
.wrapper-form .form-content {
  padding: 60px 105px;
}
.wrapper-form h3 {
  padding: 0;
  margin: 0;
  color: #424242;
  font-weight: 600;
  font-size: 2.188em;
  margin-bottom: 29px;
  text-transform: uppercase;
}
.wrapper-form p {
  color: #424242;
  line-height: 30px;
  font-size: 1em;
  margin-bottom: 46px;
}
.form-content {
  width: 85%;
  max-width: 763px;
  height: auto;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  z-index: 2;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.form-content::after {
  display: table;
  clear: both;
  content: '';
}
.email-hireus,
.subject-hireus {
  width: 100%;
  height: 50px;
  display: block;
  border-radius: 10px;
  padding-left: 23px;
  margin-bottom: 29px;
  border: 1px solid rgba(59, 67, 76, 0.3);
}
.btn-close-modal {
  top: -19px;
  right: -19px;
  position: absolute;
}
.textarea-hireus {
  width: 100%;
  height: 231px;
  resize: none;
  display: block;
  border-radius: 10px;
  padding: 20px 23px;
  margin-bottom: 30px;
  border: 1px solid rgba(59, 67, 76, 0.3);
}
.button-modal {
  width: 100%;
  border: none;
  background-color: #f7600e;
}
  • Вопрос задан
  • 1022 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
iannkolchina
@iannkolchina Автор вопроса
Actions louder than words
Проблема решена: 
.wrapper-form {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  overflow-y: auto;
  display: none;
  background-color: rgba(59, 67, 76, 0.5);
}

.form-content {
  width: 85%;
  max-width: 763px;
  height: auto;
  background-color: #fff;
  position: absolute;
  text-align: center;
  z-index: 2;
  left: 50%;
  margin: 10% auto; 
  transform: translateX(-50%);
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
а как именно ты хочешь, чтобы оно отображалось, когда контент не влезает в экран?
1) скролл на самом окне браузера - для этого делаешь overflow: hidden для body при открытии модалки и делаешь скролл на обертке модалки
2) скролл на самой модалке - тут уже просто ограничиваешь высоту модалки и даешь ей overflow-y: auto;
Ответ написан
8 комментариев
8 комментариев
LenovoId
@LenovoId
svg, css,js
можно flexbox применить : justify-content:center; align-items:center;
так же с absolute : left:50%; right:50%; transform:translate(-50%,-50%);
Ответ написан
5 комментариев
5 комментариев
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработка дизайна коробки в развернутом виде
24 апр. 2024, в 12:13
2000 руб./за проект
Нужна лендинг страница для telegram канала
24 апр. 2024, в 12:11
1000 руб./за проект
Нужен промт для миджорни
24 апр. 2024, в 12:08
1000 руб./за проект
Ещё заказы