0

Как вставить форму в карту? ссылка на codepen

>Тут< Как должно выглядеть

.map
  width: 100%
  height: 462px
  border: 0
.modal
  position: fixed
  left: 0
  top: 0
  width: 100%
  height: 100%
  background-color: rgba(#000, 0.5)
  display: none
  z-index: 2
  &-block   
    background: #f2f2f2
  &_active
    display: flex
  &-dialog
    position: relative
    margin: auto
    max-width: 405px
    width: 90%
    min-width: 200px
    min-height: 390px
    background-color: #fff
  &__close
    position: absolute
    top: 0
    right: 0
    padding: 5px 10px
    background: #ffc800
  &__title
    display: block
    text-align: center
    margin: 50px 80px 15px 80px
    max-width: 350px
    font-size: 20px
    color: #000
    line-height: 1.45
    &-color
      color: #ffc800
  &__input
    padding: 20px 50px
    border-top: none
    border-left: none
    border-right: none
    font-size: 18px
  &__button
    margin: 47px 60px
    font-size: 20px
    padding: 15px 30px
    background: #ffc800
  &__form
    display: flex
    flex-direction: column
.input-group
  position: relative
  margin: 0 auto
em.navbar-invalid
  color: red
  position: absolute
  top: 2px
  left: 49px
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2241.7170936062944!2d37.95168061609055!3d55.81551169462094!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x414acc59c3575ba9%3A0xbee91b004e1d06f9!2z0YPQuy4g0KHQvtCy0LXRgtGB0LrQsNGPLCA0OCwg0JHQsNC70LDRiNC40YXQsCwg0JzQvtGB0LrQvtCy0YHQutCw0Y8g0L7QsdC7LiwgMTQzOTAy!5e0!3m2!1sru!2sru!4v1574362875346!5m2!1sru!2sru" class="map map__form" allowfullscreen=""></iframe>


  <!-- Модальное окно навбара -->
  <div class="modal-map" id="modal">
      <div class="modal-dialog">
        <button class="button modal__close" id="close">&times;</button>
        <div class="modal-block">
          <h1 class="modal__title">ОСТАВЬТЕ <span class="modal__title-color">ЗАЯВКУ</span></h1>
          <form action="mail.php" method="POST" class="form modal__form" id="navbar-form">
            <div class="input-group">
              <input type="text" name="username" class="input modal__input" placeholder="Ваше имя">
            </div>
            <div class="input-group">
              <input type="tel" name="phone" class="input modal__input phone" placeholder="Ваш номер телефона">
            </div>
            <button class="button modal__button">ЗАКАЗАТЬ ЗВОНОК</button>
          </form>
        </div>
      </div>
    </div>

    <!-- Конец модального окна -->

3
  • у вас там по ссылке вирусы в js 22 ноя 2019 в 14:06
  • О_О это как вообще?
    – Andrey S
    22 ноя 2019 в 14:12
  • А в чём проблема? Через абсолютное позиционирование установите форму над картой(iframe).... У вас сейчас установлен для модал position:relative; зачём? поставьте absolute и т.д
    – Arsen
    22 ноя 2019 в 14:25

1 ответ 1

1

понял как решить проблему, необходимо было карте задать position relative, а модалке position absolute и относительно карты перемещать модалку

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