jquery - 置顶消息如何在 10 秒后自动关闭

标签 jquery css hover

好吧,我知道如何显示可关闭的粘滞消息,但我想知道如何在 10 秒后关闭它,并显示 10 秒计数器...以及如何赋予它悬停效果... 这是我的可关闭置顶信息,仅供您引用

<script>
function closeBox(toClose) {
    document.getElementById(toClose).style.display = "none";setCookie(toClose,closed", 20);}

function setCookie(cName, value, expiredays) {var expDate = new Date();expDate.setDate(expDate.getDate()+expiredays);document.cookie=cName + "=" + escape(value) + ";expires=" + expDate.toGMTString();}

    function loadMsg(msgClass) {msg = document.getElementsByTagName("div");for (i=0; i<msg.length; i++){if(msg[i].className == msgClass) {if(document.cookie.indexOf(msg[i].id) == -1) {msg[i].style.display = "block";}}}}

    window.onload=function(){loadMsg('msgbox'); }
</script>

    http://kownleg.blogspot.com
    <style>
    div.guestwarn {
    background:#000000;
    color:#FFFFFF;
    max-width:280px;min-height:18px;padding:0 5px 3px;position:fixed;right: 2%;
        top: 50%;padding: 10px 15px;position: fixed;z-index: 10;font-size:12px;-moz-border-radius: 8px; -webkit-border-radius: 8px;  filter:alpha(opacity=88);
        -moz-opacity:.88; opacity:.88; -moz-box-shadow:5px 5px 5px #191919; -webkit-box-shadow:5px 5px 5px #191919; box-shadow:5px 5px 5px #191919;
    }
    .close {float: right;background: transparent url(http://1.bp.blogspot.com/-hMdL9UJje_c/UA7nJADBTSI/AAAAAAAAABU/S5zftNPRxfs/s1600/close.png);width: 22px;height: 22px;}
     </style> 


 <div id="message-1" class="msgbox" style="display: none;">
    <div class="guestwarn"><a href="#" class="close" onclick="closeBox('message-1');   return false;" title=""></a>
**My Sticky Text Is Here**
    </div>
 </div>

最佳答案

已经有很多为此构建的插件,我更喜欢Purr ,我知道的另一个是 jQuery Growl .

关于jquery - 置顶消息如何在 10 秒后自动关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12678192/

相关文章:

javascript - 在 express 中加载 css 和 js 时遇到 500 内部服务器错误

javascript - 鼠标悬停时突出显示整个系列

css - 放大悬停图像重叠问题(CSS 变换 : Scale)

javascript - 备用 div 背景颜色

jQuery、WordPress - 单击按钮 ID 以显示侧边栏,但也可以滚动到它

jquery - 视觉 Composer 挑战

css - 如何在 primefaces 中更改鼠标悬停时的命令链接图像?

javascript - 将包含特定字符串的匹配图像的 src 替换为 div 的数据属性到 css background-image

jquery - 使用 jquery 的文本动画

javascript - 叠加层未全高