0

При адаптиве кнопка закрытия всплывающего окна отъезжает далеко от самого окна. Как сделать так,чтобы она была рядом с ним и не отъезжала?

.popup {
  display: none;
  text-align: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 9;
}
.popup-content {
  position: fixed;
  background-color: #ffffff;
  left: 50%;
  transform: translateX(-50%);
  top: 10%;
}
.popup-content h3 {
  font-size: 1.8rem;
  font-family: 'ProximaNova_bold', sans-serif;
}
.popup-content p {
  font-size: 1.8rem;
}
.popup-close {
  position: absolute;
  top: -2.7rem;
  left: 36rem;
  font-size: 5rem;
  background-color: transparent;
  border: none;
  color: #ffffff;
<div class="popup">
      <div class="popup-dialog">

          <div class="popup-content">
            <button class="popup-close">&times</button>
            <div class="popup-form">
              <div class="main-form ">
                <h3>Заинтересовало?</h3>
                <p>Оставьте контактные данные <br>для связи</p>
                <form action="#">

                  <label for="#">Ваше имя</label>
                  <input class="main-form-input" type="text">
                  <label for="#">Номер телефона</label>
                  <input class="main-form-input" type="text">
                  <label for="#">Сообщение</label>
                  <textarea cols="30" rows="5" class="main-form-input"></textarea>
                  <button class="button main-form-btn" type="submit">оставьте заявку</button>
                  

                </form>

              </div>
            </div>
              
            
          </div>
        
      </div>
    </div>

введите сюда описание изображения

1
  • Стоит задать позиционирование для кнопки top и right + не в относительных единицах, а в px, ex: .close { top: 10px; right: 10px; }
    – SVE
    9 дек 2019 в 10:07

1 ответ 1

1

Вы практически всё верно сделали. Нужно было только точнее выставить отступы top, left.
Или же я не совсем понял вопрос.

  .popup {
  display: block;
  text-align: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 9;
}

.popup-content {
  position: fixed;
  background-color: #ffffff;
  left: 50%;
  transform: translateX(-50%);
  top: 10%;
}

.popup-content h3 {
  font-size: 1.8rem;
  font-family: 'ProximaNova_bold', sans-serif;
}

.popup-content p {
  font-size: 1.8rem;
}

.popup-close {
  position: absolute;
  top: -1rem;
  left: -4rem;
  font-size: 5rem;
  background-color: transparent;
  border: none;
  color: red;
<div class="popup">
  <div class="popup-dialog">

    <div class="popup-content">
      <button class="popup-close">&times</button>
      <div class="popup-form">
        <div class="main-form ">
          <h3>Заинтересовало?</h3>
          <p>Оставьте контактные данные <br>для связи</p>
          <form action="#">

            <label for="#">Ваше имя</label>
            <input class="main-form-input" type="text">
            <label for="#">Номер телефона</label>
            <input class="main-form-input" type="text">
            <label for="#">Сообщение</label>
            <textarea cols="30" rows="5" class="main-form-input"></textarea>
            <button class="button main-form-btn" type="submit">оставьте заявку</button>


          </form>

        </div>
      </div>


    </div>

  </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.