Javascript onclick close div

Question

I have a div that whenever the user clicks it, a form for a newsletter pops out, at the moment the code is set that an overflow fills the rest of the webpage an that is where the user has to click in order for the form to close, however i want the form to only close when the user clicks anywhere inside the form (except the sign up/email input section) and not outside.

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>

Newsletters zurückziehen und sich 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

http://jsfiddle.net/VN2b7/

The resize function isn't needed just set the height and width for overflow in your css to 100%

Add the overflow div to your html it's display is set to none, Jquerys face methods will fade methods will hide and unhide it.

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

Now just change your JS to this. A boolean flag will tell the click handler how to behave.

var extended = false;
$(function () {
  $('.newsletter').click(function () {
    console.log(!extended);
    if (!extended) {
        extended = true;
        $(this).stop().animate({left: '-35'}, 650);
        $('#overflow').fadeIn('slow');
    } else {
        extended = false;
        $('#overflow').fadeOut('slow')
        $(this).animate({left: '-390px'}, 650);
    }
  });
});

Answer 2

Try adding this code in your Jquery function

 $('#newslettertext1,#newslettertext2').click(function() {

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

  });

Answer 3

Ive changed few things. First, I changed you anonymus function and gave them a name.

  function open(){}

  function close(e){}

Then you DOM ready function look like this:

$(function() {

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

    $(window).resize(function() {

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

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

    });

});

Giving a name to your click handler is important here.

In the open function, i've added this :

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

Removing the handler and adding one so you don't have 2 events binded.

Then in the close function, i have added an if to check if the target is not an input, if it is, it prevent the pop up from closing :

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)

}

Here's the fiddle : http://jsfiddle.net/FpEZg/1/

EDIT: the code above close the popup when you click on #overflow, but removing it from the selector will prevent it. http://jsfiddle.net/FpEZg/2/

Answer 4

You can use a bool to decide which click functionality to run.

Your newsletter click function should look as follows.

$('.newsletter').click(function() {
    if(this.isVisible){
        $("#overflow").fadeOut('slow') 
        $('.newsletter').stop().animate({ left: '-390px' }, 650);
        this.isVisible=false;
    }
    else{
      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 });
        this.isVisible=true;
    }
});