入力/上のサインアップフィールドモーダル機能していない

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

イベントは、クリックした場所の下にある要素のdomツリーをクリックしたときに、その要素からバブリングアップしています。そのようにして、

$('.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）; 〜$（ "。ボタンa"）。fadeToggle（200）; htmlの入力タイプを変更しました。私の質問を見て時間をとってくれてありがとう