[英]can not close JS popup
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 我有一个脚本,该脚本创建了一个延迟3000的弹出窗口,并出现在我的网站上,问题是我无法删除它,这是我的脚本
html HTML
<div id="growl"></div>
css 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);
}
click函数回调中的this不再引用调用对象,因此您需要将调用对象的this上下文绑定到该函数,或将其更改为要关闭的元素的id。
there's more stuff that was wrong in your setup. 在您的设置中还有其他错误。 I've created this fiddle: http://jsfiddle.net/CyJRF/2/
我创建了这个小提琴: 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'. 您正在将click事件绑定到'.close'元素,但是要在$(document).ready()处进行此操作,然后才能在'addNotice'内部创建该元素。 I've moved around some of the javascript...
我已经移动了一些JavaScript ...
And as @Jordan rightly noted, you need to change $(this). 正如@Jordan正确指出的那样,您需要更改$(this)。 I'm just using
$("#growl .notice")
for this now 我现在只是使用
$("#growl .notice")
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.