Question

我有一个div，无论何时用户点击它，都会弹出一个新闻稿的表单，此时代码设置为溢出填满了网页的其余部分，用户必须点击该页面才能要关闭的表单，但我希望表单只在用户单击表单内的任何位置（注册/电子邮件输入部分除外）而不是外部时关闭。

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>

通讯zurückziehen和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

我改变了一些事情。首先，我改变了你的匿名功能并给了他们一个名字。

  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 });

    });

});

在此处为点击处理程序命名非常重要。

在open函数中，我添加了这个：

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

删除处理程序并添加一个处理程序，因此您没有绑定2个事件。

然后在关闭函数中，我添加了一个if来检查目标是否不是输入，如果是，则阻止弹出关闭：

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/

编辑：上面的代码点击#overflow时关闭弹出窗口，但是从选择器中删除它会阻止它。 http://jsfiddle.net/FpEZg/2/

Answer 2

您可以使用bool来决定运行哪种点击功能。

您的简报点击功能应如下所示。

$('.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;
    }
});

Answer 3

尝试在Jquery函数中添加此代码

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

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

  });

Answer 4

http://jsfiddle.net/VN2b7/

不需要调整大小功能，只需将css中溢出的高度和宽度设置为100％

将溢出div添加到你的html中它的显示设置为none，Jquerys face方法将淡化方法将隐藏和取消隐藏它。

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

现在只需将您的JS更改为此。布尔标志将告诉点击处理程序如何表现。

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);
    }
  });
});

Javascript onclick关闭div

4 个答案: