2012-10-02 89 views
0

我有谁创造一个弹出延迟3000,并出现在我的网站的脚本,问题是,我不能删除它,这里是我的脚本无法关闭JS弹出

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

回答

1

有更多的东西在你的设置中是错误的。我创造了这个小提琴: http://jsfiddle.net/CyJRF/2/

你要绑定一个click事件到“.close”元素,而是你在$做它(文件)。就绪(),已内创建元素之前“ addNotice”。 我已经移动了一些javascript ...

而@Jordan正确指出,您需要更改$(this)。我现在只是使用$("#growl .notice")

+0

非常感谢,这是伟大的,它在JSFIDDLE工作正常,但是当我把它放在我的HTML,我有这个错误意外的标记非法结尾。 –

+1

检查此帖:http://stackoverflow.com/questions/4404526/unexpected-token-illegal-in-webkit 或只是谷歌'意外的令牌非法';) –

+0

对不起,我的不好,谢谢一切都工作完美谢谢你很非常。 –

4

的这个在点击回调函数不再是指调用对象,所以你需要调用对象的这种情况下绑定到功能,或将其更改为的id您要关闭的元素。