0

ユーザーがクリックするたびにニュースレターのフォームが飛び出すdivがあります.オーバーフローがWebページの残りの部分を埋めるようにコードが設定されている瞬間に、ユーザーがフォームをクリックする必要がある場所です.閉じますが、ユーザーがフォーム内のどこか (サインアップ/電子メール入力セクションを除く) をクリックしたときにのみフォームを閉じ、外側では閉じないようにします。

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

    });

});

ここでは、クリック ハンドラに名前を付けることが重要です。

オープン関数で、これを追加しました:

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

2 つのイベントがバインドされないように、ハンドラーを削除して 1 つ追加します。

次に、閉じる機能で、ターゲットが入力ではないかどうかを確認する 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

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;
    }
});
于 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% に設定するだけで、サイズ変更機能は必要ありません。

表示が none に設定されている html にオーバーフロー div を追加します。

#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 に答える