0

I have a script who creates a popup delays 3000 and appears in my site , the problem is that i cant remove it, here is my script

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

the button to close

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

my script

 $(document).ready(function(){

the delay

setTimeout(function() {

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

},3000);

the close function

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

settings 

 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);
 }
Sebass van Boxel
  • 2,514
  • 1
  • 22
  • 37
Lefteris Livanos
  • 101
  • 1
  • 9

2 Answers2

4

The this in your click function callback no longer refers to the calling object so you need to bind the this context of the calling object to that function, or change this to the id of the element you want to close.

Jordan Denison
  • 2,649
  • 14
  • 14
1

there's more stuff that was wrong in your setup. I've created this fiddle: http://jsfiddle.net/CyJRF/2/

you are binding a click event to the '.close' element, but you are doing it at $(document).ready(), before that element has been created inside 'addNotice'. I've moved around some of the javascript...

And as @Jordan rightly noted, you need to change $(this). I'm just using $("#growl .notice") for this now

Reinder Wit
  • 6,490
  • 1
  • 25
  • 36