Входа/Регистрация поле на модальном не работает

Question

Я пытаюсь добавить поле регистрации/вход на модальном, но каждый раз, когда я нажимаю в поле ввода он просто переключает от модального

$(document).ready(function(){ 
    $(".button a").click(function(){ 
     $(".overlay").fadeToggle(200); 
     $(this).toggleClass('btn-open').toggleClass('btn-close'); 
    }); 
}); 
$('.overlay').on('click', function(){ 
    $(".overlay").fadeToggle(200); 
    $(".button a").toggleClass('btn-open').toggleClass('btn-close'); 
    open = false; 
}); 

http://codepen.io/kingatron/pen/qZLmjQ

Как я могу изменить jquery, чтобы я мог использовать поле ввода?

Answer 1

Проверить на input как цель при нажатии на оверлей.

$('.overlay').on('click', function(e){ 
    if(e.target.id != "mce-EMAIL") { 
    $(".overlay").fadeToggle(200); 
    $(".button a").toggleClass('btn-open').toggleClass('btn-close'); 
    open = false; 
    } 
}); 

Это проверить, что если щелкнуть внутри input на накладкой затем нажмите действие не будет происходить, что нет переключения накладываемого.

См. Это pen.

Answer 2

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

$('.overlay').on('click', function(){...}); 

обработчик стреляет и закрывает ваш оверлей.

Если вы добавите аргумент в определение функции, вы можете проверить цель события, чтобы идентифицировать верхний элемент, на который был нажат.

$('.overlay').on('click', function(){ 
    // check el.target to identify the element clicked on 
    // to determine whether the overlay should be shown 

    // if the element isn't the overlay div 
    if (el.target != this) 
    { 
    // exit and return false to prevent the event from bubbling 
    return false; 
    } 

    // otherwise hide the overlay... 
    $(".overlay").fadeToggle(200); 
    $(".button a").toggleClass('btn-open').toggleClass('btn-close'); 
    open = false; 
}); 

Answer 3

Я изменил $ (". Overlay"). FadeToggle (200); до $ (". button a"). fadeToggle (200); а затем изменил тип ввода в html. Спасибо, что нашли время, чтобы посмотреть на мой вопрос.