Касание к форме проходит «сквозь» нее. Как решить?

Всем доброго утречка! (Или любого другого времени суток)
На сайте есть самописная форма запроса обратного звонка. На десктопах все отлично. Но с мобильных устройств она работает немного неправильно.
После клика по кнопке, форма появляется, можно нажать на поле для ввода, ввести номер, а когда дело доходит до нажатия кнопки отправки, то касание «проваливается» на задние элементы.
Чтобы такого не было, нужно ввести номер, нажать кнопку «ввод» на самой клавиатуре телефона, или додуматься сначала закрыть клавиатуру, а потом нажать кнопку (И то, не всегда. Зависит от настроения кнопки). Как это исправить? Дело не в z-index. Всей форме дано самое высокое положение по нему.

Прошу прощения! Забыл добавить код!
Пока разбирался, подумал о том, что проблема может как-то касаться JS. Т.к. ничего необычного в HTML или CSS нет.
<div class="callback">
          <a href="#" onclick="showcallbackform('#callback-form'); return false"><img src="imgs/icons/callback.png" alt="Обратный звонок"></a>
        </div>
        <div id="callback-form">
          <div class="callback-form-header">
            <p>Введите мобильный номер, и мы перезвоним Вам в течение 1 минуты!</p>
          </div>
          <div class="callback-form-main">
            <form method="post" action="callback.php">
              <div class="callback-form-input">
                <span>+7</span>
                <input type="tel" name="phone_number" maxlength="10" pattern="[0-9]{10}" required>
              </div>
              <div>
                <input type="submit" value="ПОЗВОНИТЕ МНЕ" class="callback-btn-box">
              </div>
              <div class="callback-contactUs">
                <a href="адрес другой страницы"><p>Написать нам</p></a>
              </div>
            </form>
          </div>
        </div>

function showcallbackform (objName) {
    if ( $(objName).css('display') == 'none' ) {
        $(objName).animate({height: 'show'}, 200);
    } else {
        $(objName).animate({height: 'hide'}, 200);
    }
};

jQuery(function($){
    $(document).on( "mouseup touchend", function(e){
        var div = $("#callback-form");
        if (!div.is(e.target)
            && div.has(e.target).length === 0) {
            div.hide();
        }
    });
});
  • Вопрос задан
  • 43 просмотра
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы