0

私はポップアップ遅延3000を作成し、私のサイトに表示されるスクリプトを持っています、問題は私がそれを削除できないことです、これが私のスクリプトです

html

 <div id="growl"></div>

css

#growl {
position: absolute;
padding:5px;
bottom: 0;
right: 5px;
width: 320px;
z-index: 10;
}

.notice {
 position: relative;
 min-height: 30px;
 padding:5px;
 }

 .skin {
 position: absolute;
 background-color: #000000;
 bottom: 0;
 left: 0;
 opacity: 0.6;
 right: 0;
 top: 0;
 z-index: -1;
 -moz-border-radius: 5px; -webkit-border-radius: 5px;
 }

閉じるボタン

 .close {
 background: transparent url('../img/egrowl.png') 0 0 no-repeat;
 text-indent: -9999px;
 position: absolute;
 top: 2px;
 right: 2px;
  width: 26px;
 height: 26px;
 }

私のスクリプト

 $(document).ready(function(){

遅延

setTimeout(function() {

addNotice('<p>Do not Forget To Become A member </p><a href="subscribe.php">Subscribe</a>');

},3000);

クローズ機能

$('#growl')
.find('.close')
.on('click', function() {
    $(this)
        .closest('.notice')
        .animate({
            border: 'none',
            height: 0,
            marginBottom: 0,
            marginTop: '-6px',
            opacity: 0,
            paddingBottom: 0,
            paddingTop: 0,
            queue: false
        }, 2000, function() {
            $(this).remove();
        });
   });
      });

設定 

 function addNotice(notice) {
$('<div class="notice"></div>')
    .append('<div class="skin"></div>')
    .append('<a href="#" class="close">close</a>')
    .append($('<div class="content"></div>').html(notice))
    .hide()
    .appendTo('#growl')
    .fadeIn(1000);
 }
4

2 に答える 2

4

クリック関数コールバックのthisは、呼び出し元オブジェクトを参照しなくなったため、呼び出し元オブジェクトのthisコンテキストをその関数にバインドするか、これを閉じたい要素のIDに変更する必要があります。

于 2012-10-02T13:44:37.787 に答える
1

セットアップで間違っていたものが他にもあります。私はこのフィドルを作成しました：http： //jsfiddle.net/CyJRF/2/

クリックイベントを「.close」要素にバインドしていますが、その要素が「addNotice」内に作成される前に、$（document）.ready（）でバインドしています。私はjavascriptのいくつかを移動しました...

そして、@ Jordanが正しく指摘したように、$（this）を変更する必要があります。私は$("#growl .notice")今これに使用しています

于 2012-10-02T13:57:00.017 に答える