0

我有一个 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>

时事通讯 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 });

});

});

4

4 回答 4

4

我改变了一些东西。首先，我改变了你的匿名函数并给了它们一个名字。

  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/

于 2013-09-12T16:51:26.010 回答
1

您可以使用布尔值来决定运行哪个点击功能。

您的时事通讯点击功能应如下所示。

$('.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;
    }
});
于 2013-09-12T16:47:21.447 回答
0

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

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

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

  });
于 2013-09-12T16:49:34.597 回答
0

http://jsfiddle.net/VN2b7/

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

将溢出 div 添加到您的 html 中，它的显示设置为无，Jquery 的面部方法将淡入淡出方法将隐藏和取消隐藏它。

#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);
    }
  });
});
于 2013-09-12T17:15:32.863 回答