Question

我有一个脚本谁创建了一个弹出延迟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);
 }

Answer 1

click函数回调中的this不再引用调用对象，因此您需要将调用对象的此上下文绑定到该函数，或将其更改为要关闭的元素的id。

Answer 2

您的设置中存在更多错误。我创造了这个小提琴： http://jsfiddle.net/CyJRF/2/

您将click事件绑定到'.close'元素，但是您在$（document）.ready（）之前执行此操作，之后在'addNotice'中创建了该元素。我已经移动了一些javascript ...

正如@Jordan正确指出的那样，你需要改变$（这个）。我现在正在使用$("#growl .notice")

无法关闭JS弹出窗口

2 个答案: