1

При медиа запросе на мобильном устройстве, всплывающие окно никак не реагирует на изменения. Не знаю как исправить ошибку.
Подскажите. Вот код:

function myBtn() {
  document.getElementById('modalW').style.display = 'block';
}

function closee() {
  document.getElementById('modalW').style.display = 'none';
}

window.onclick = function(event) {
  if (event.target == document.getElementById('modalW')) {
    document.getElementById('modalW').style.display = 'none';
  }
}
/*Smartphones*/

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .modalW {
    max-width: 100%;
    max-height: 100%;
    top: auto;
    bottom: auto;
    padding: 0px 0px 10px 0px;
  }
  .modalW__text p {
    font-size: 32px;
  }
}

.modalOne {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
}

.modalW {
  margin: 4% auto;
  width: 528px;
  height: 533px;
  background: #f8f9fa;
  padding: 0px 41px 10px 41px;
  /*z-index: 9999;*/
}

.modalW__text p {
  font-family: Bello-Pro;
  font-size: 64px;
  color: #263238;
  margin: 0px;
}

.modalW__text i {
  color: #9C27B0;
  position: relative;
  left: 470px;
  top: -1px;
}

form {
  margin-top: 20px;
  text-align: center;
  /*position: relative;
        bottom: 20px;*/
}

form p {
  font-family: Roboto-Regular;
  font-size: 14px;
  color: #CCCCCC;
}

.text {
  background-color: #f8f9fa;
  border-color: #95BB31;
  padding-right: 17px;
  width: 211px;
  border-bottom-style: solid;
  border-style: none;
  border-bottom: 2px solid #95BB31;
  background-color: transparent;
  font-family: Roboto-Bold;
  font-size: 18px;
  color: #263238;
}

input::placeholder {
  color: #CCCCCC;
}

.lobel__name {
  position: relative;
  top: 4px;
  right: 186px;
  margin: 0px;
}

.lobel__phone {
  position: relative;
  left: 60px;
  bottom: 17px;
  margin: 0px;
}

.lobel span {
  color: red;
}

#text {
  margin-right: 17px;
}

.lobel__message {
  text-align: left;
}

#message {
  width: 465px;
  padding-bottom: 90px;
}

input[type="checkbox"] {
  outline: 2px solid #95BB31;
  border-style: none;
  background-color: transparent;
}

.control__text {
  position: relative;
  left: 6px;
  bottom: -7px;
  font-family: Roboto-Regular;
  font-size: 14px;
  color: #CCCCCC;
}

.control {
  display: block;
  position: relative;
  padding-left: 37px;
  margin-bottom: 5px;
  padding-top: 2px;
  cursor: pointer;
  font-size: 16px;
}

.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.control_indicator {
  position: absolute;
  top: 23px;
  left: 0;
  height: 24px;
  width: 24px;
  background: #f8f9fa;
  border: 2px solid #95BB31;
}

.control-radio .control_indicator {
  border-radius: undefined%;
}

.control:hover input~.control_indicator,
.control input:focus~.control_indicator {
  background: #f8f9fa;
}

.control input:checked~.control_indicator {
  background: #f8f9fa;
}

.control:hover input:not([disabled]):checked~.control_indicator,
.control input:checked:focus~.control_indicator {
  background: #f8f9fa;
}

.control input:disabled~.control_indicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}

.control_indicator:after {
  box-sizing: unset;
  content: '';
  position: absolute;
  display: none;
}

.control input:checked~.control_indicator:after {
  display: block;
}

.control-checkbox .control_indicator:after {
  left: 9px;
  top: 6px;
  width: 3px;
  height: 8px;
  border: solid #9C27B0;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.control-checkbox input:disabled~.control_indicator:after {
  border-color: #7b7b7b;
}

.modal__recap img {
  margin-top: 10px;
}

.modal__recap button {
  border: none;
  background: #9C27B0;
  font-family: Roboto-Bold;
  font-size: 14px;
  color: #FFFFFF;
  padding: 12px;
  position: relative;
  bottom: 32px;
  left: 75px;
  background: #9C27B0;
  box-shadow: 10px 15px 30px 0 rgba(150, 26, 129, 0.36);
}
<button onclick="myBtn()">Связаться с нами</button>
<div class="modalOne" id="modalW">
  <div class="modalW">
    <div class="modalW__text">
      <span onclick="closee()">
    				<i class="fa fa-times" aria-hidden="true"></i>
    			</span>
      <p>Напишите нам</p>
    </div>
    <div class="modal__form">
      <form>
        <div class="lobel">
          <p class="lobel__name">Ваше имя <span>*</span></p>
          <p class="lobel__phone">Ваш телефон <span>*</span></p>
        </div>
        <input class="text" id="text" type="text" name="name" placeholder="Иван Иванов">
        <input class="text" type="text" name="" placeholder="+7 (___) ___ __ __">
        <p class="lobel__message">Ваше сообщение</p>
        <input class="text" id="message" type="text" name="" placeholder="Ваше сообщение">
      </form>
      <label class="control control-checkbox">
               <p class="control__text">Согласен с обработкой моих персональных данных в соответствии с политикой конфиденциальности</p> 
                <input type="checkbox" id="check" />
                <div class="control_indicator" id="control"></div>
            </label>
    </div>
    <div class="modal__recap">
      <img src="img/recaptcha2.png">
      <button onclick="resultClick()">Отправить</button>
    </div>
  </div>
</div>

2
  • @ Максим, конечно он там есть. я уже три страницы сверстала адаптивно, а тут дело дошло до модального окна и ничего не работает((
    – maRIA M.
    9 июн 2018 в 0:22
  • @ Максим, спасибо, но не помогло
    – maRIA M.
    9 июн 2018 в 0:37

2 ответа 2

2

Комментарии в коде, что было изменено...

function myBtn() {
  document.getElementById('modalW').style.display = 'block';
}

function closee() {
  document.getElementById('modalW').style.display = 'none';
}

window.onclick = function(event) {
  if (event.target == document.getElementById('modalW')) {
    document.getElementById('modalW').style.display = 'none';
  }
}

document.getElementById('modalW').style.display = 'none'; //добавленая строка
/*Smartphones*/

@media only screen and (max-width:480px) and (min-width:320px) {
  /*медия любит точное определение элемента*/
  /*надо прописывать вложености*/
  .modalOne>.modalW {
    /*display: none; убери отсюда эту строку и добавь ее в JS*/
    position: relative;
    max-width: 100%;
    max-height: 100%;
    top: auto;
    bottom: auto;
    background: #1fc1fc;
  }
  .modalOne>.modalW>.modalW__text>p {
    font-size: 32px;
  }
}

.modalOne {
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
}

.modalW {
  margin: 4% auto;
  width: 528px;
  height: 533px;
  background: #f8f9fa;
}

.modalW__text p {
  font-family: Bello-Pro;
  font-size: 64px;
  color: #263238;
  margin: 0px;
}

.modalW__text i {
  color: #9C27B0;
  position: relative;
  left: 470px;
  top: -1px;
}

form {
  margin-top: 20px;
  text-align: center;
  /*position: relative;
        bottom: 20px;*/
}

form p {
  font-family: Roboto-Regular;
  font-size: 14px;
  color: #CCCCCC;
}

.text {
  background-color: #f8f9fa;
  border-color: #95BB31;
  padding-right: 17px;
  width: 211px;
  border-bottom-style: solid;
  border-style: none;
  border-bottom: 2px solid #95BB31;
  background-color: transparent;
  font-family: Roboto-Bold;
  font-size: 18px;
  color: #263238;
}

input::placeholder {
  color: #CCCCCC;
}

.lobel__name {
  position: relative;
  top: 4px;
  right: 186px;
  margin: 0px;
}

.lobel__phone {
  position: relative;
  left: 60px;
  bottom: 17px;
  margin: 0px;
}

.lobel span {
  color: red;
}

#text {
  margin-right: 17px;
}

.lobel__message {
  text-align: left;
}

#message {
  width: 465px;
  padding-bottom: 90px;
}

input[type="checkbox"] {
  outline: 2px solid #95BB31;
  border-style: none;
  background-color: transparent;
}

.control__text {
  position: relative;
  left: 6px;
  bottom: -7px;
  font-family: Roboto-Regular;
  font-size: 14px;
  color: #CCCCCC;
}

.control {
  display: block;
  position: relative;
  padding-left: 37px;
  margin-bottom: 5px;
  padding-top: 2px;
  cursor: pointer;
  font-size: 16px;
}

.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.control_indicator {
  position: absolute;
  top: 23px;
  left: 0;
  height: 24px;
  width: 24px;
  background: #f8f9fa;
  border: 2px solid #95BB31;
}

.control-radio .control_indicator {
  border-radius: undefined%;
}

.control:hover input~.control_indicator,
.control input:focus~.control_indicator {
  background: #f8f9fa;
}

.control input:checked~.control_indicator {
  background: #f8f9fa;
}

.control:hover input:not([disabled]):checked~.control_indicator,
.control input:checked:focus~.control_indicator {
  background: #f8f9fa;
}

.control input:disabled~.control_indicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}

.control_indicator:after {
  box-sizing: unset;
  content: '';
  position: absolute;
  display: none;
}

.control input:checked~.control_indicator:after {
  display: block;
}

.control-checkbox .control_indicator:after {
  left: 9px;
  top: 6px;
  width: 3px;
  height: 8px;
  border: solid #9C27B0;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.control-checkbox input:disabled~.control_indicator:after {
  border-color: #7b7b7b;
}

.modal__recap img {
  margin-top: 10px;
}

.modal__recap button {
  border: none;
  background: #9C27B0;
  font-family: Roboto-Bold;
  font-size: 14px;
  color: #FFFFFF;
  padding: 12px;
  position: relative;
  bottom: 32px;
  left: 75px;
  background: #9C27B0;
  box-shadow: 10px 15px 30px 0 rgba(150, 26, 129, 0.36);
}
<button onclick="myBtn()">Связаться с нами</button>
<div class="modalOne" id="modalW">
  <div class="modalW">
    <div class="modalW__text">
      <span onclick="closee()">
                    <i class="fa fa-times" aria-hidden="true"></i>
                </span>
      <p>Напишите нам</p>
    </div>
    <div class="modal__form">
      <form>
        <div class="lobel">
          <p class="lobel__name">Ваше имя <span>*</span></p>
          <p class="lobel__phone">Ваш телефон <span>*</span></p>
        </div>
        <input class="text" id="text" type="text" name="name" placeholder="Иван Иванов">
        <input class="text" type="text" name="" placeholder="+7 (___) ___ __ __">
        <p class="lobel__message">Ваше сообщение</p>
        <input class="text" id="message" type="text" name="" placeholder="Ваше сообщение">
      </form>
      <label class="control control-checkbox">
                        <p class="control__text">Согласен с обработкой моих персональных данных в соответствии с политикой конфиденциальности</p>
                        <input type="checkbox" id="check" />
                        <div class="control_indicator" id="control"></div>
                    </label>
    </div>
    <div class="modal__recap">
      <img src="img/recaptcha2.png">
      <button onclick="resultClick()">Отправить</button>
    </div>
  </div>
</div>

0
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {

замени на

@media(max-width: 480px)

прикол в том, что ты обращаешься к device-width. Например у iphone 4 ширина 640px, но тк у них 2пикселя на 1 css пиксель, то получается 320, но device-width будет обращаться как раз к 640, отсюда и косяк

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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