Javascript onclick close div

Question

У меня есть div, который всякий раз, когда пользователь нажимает на него, появляется форма для бюллетеня, в момент, когда код установлен, что переполнение заполняет остальную часть веб-страницы, и это то, где пользователь должен нажмите, чтобы закрыть форму, однако я хочу, чтобы форма закрывалась только тогда, когда пользователь щелкает в любом месте формы (кроме раздела ввода/отправки сообщений), а не снаружи.

http://jsfiddle.net/KarinaMcG/FpEZg/

HTML:

<div class="newsletter"> 
<div id="newslettertext1"> 
    Newsletter bestellen<br> 
    <br> 
    Lassen Sie sich per Newsletter &#252;ber Neuheiten und <br> 
    Aktionen von Tempur informieren. Jetzt anmelden 
</div> 
<div id="signup"> 
    <form id="leftnewsletter" action="" method="get"> 
    <input type="email" name="email" id="emailsignup" placeholder="E-MAIL ADDRESS" style="margin-left:76px; margin-top:16px; width:187px;"> 
    <input type="submit" name="signupbtn" id="signupbtn" value="SIGN UP" class="signupbutton"> 
</form> 
</div> 
<div id="newslettertext2"> 
    *Sie k&#246;nnen jederzeit Ihre Einwilligung zum Erhalt des<br> 

Бюллетени цур ü ckziehen унд Сечи abmelden.

CSS:

body 
{ 
font-family: Arial; 
} 

.newsletter 
{ 
background-color:#f94798; 
position: fixed; 
top: 200px; 
left: -390px; 
width: 450px; 
height: 200px; 
z-index: 9999; 
cursor: pointer; 
} 

#newslettertext1 
{ 
font-size: 11px; 
padding-top:40px; 
padding-left:75px; 
font-weight: bold; 
color:#164e82; 
} 

#newslettertext2 
{ 
font-size:10px; 
color:#eaeaea; 
margin-left:76px; 
margin-top:7px; 
} 

#overflow { 
background-color: #fdf291; 
position: absolute; 
top: 0; 
left: 0; 
display: none; 
} 

.text { 
display: block; 
width: 180px; 
margin: 80px 0 0 196px; 
font-family: Arial; 
font-size: 16px; 
font-weight: bold; 
text-align: center; 
letter-spacing: 3px; 
color: #ffffff; 
cursor: pointer; 
transform: rotate(-90deg); 
-ms-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
-webkit-transform: rotate(-90deg); 
} 

.signupbutton 
{ 
background-color: #164e82; 
color:#ffffff; 
border-radius: 5px; 
    cursor: pointer; 
} 

Javascript:

$(function() { 

$('.newsletter').click(function() { 

    var overflow = ('<div id="overflow"><div>'); 

    $(this).stop().animate({ left: '-35' }, 650); 

    if($('#overflow').length < 1) { 
    $('body').append(overflow); 
    } 

    var wWth = $(window).innerWidth(), 
     wHgt = $(window).innerHeight(); 

    $('#overflow').fadeIn('slow').css({ width: wWth, height: wHgt }); 

    $('#overflow').click(function() { 

    $(this).fadeOut('slow') 
    $('.newsletter').stop().animate({ left: '-390px' }, 650); 

    }); 

}); 

$(window).resize(function() { 

    var wWth = $(window).innerWidth(), 
     wHgt = $(window).innerHeight(); 

    $('#overflow').fadeIn('slow').css({ width: wWth, height: wHgt }); 

}); 

});

Answer 1

Ive изменилось несколько вещей. Во-первых, я изменил вашу функцию анонима и дал им имя.

function open(){} 

    function close(e){} 

Тогда вы DOM готова функция выглядеть следующим образом:

$(function() { 

    $('.newsletter').on('click.open', open) 

    $(window).resize(function() { 

     var wWth = $(window).innerWidth(), 
      wHgt = $(window).innerHeight(); 

     $('#overflow').fadeIn('slow').css({ width: wWth, height: wHgt }); 

    }); 

}); 

Давать имя обработчика щелчка важно здесь.

В открытой функции, я добавил следующее:

$('#overflow, .newsletter').off('click.open').on('click.close', close) 

Удаление обработчика и добавление один, так что вы не имеете 2 события привязываться.

Тогда в тесной функции, я бы добавил, если проверить, если цель не вход, если он есть, то предотвратить всплывающее от закрытия:

function close(e) { 
    if($(e.target).is('input')) return; 
    $('#overflow').fadeOut('slow') 
    $('.newsletter').stop().animate({ left: '-390px' }, 650); 
    $('#overflow, .newsletter').off('click.close').filter('.newsletter').on('click.open', open) 

} 

Вот скрипка: http://jsfiddle.net/FpEZg/1/

EDIT: код выше закрывает всплывающее окно при нажатии на #overflow, но удаление его из селектора предотвратит его.http://jsfiddle.net/FpEZg/2/