jquery实现右下角弹窗并有提示音

本文介绍一种通过jquery实现右下角弹窗，并有提示音的实现方法，类似于腾讯QQ右下角的广告弹窗，实现过程很简单，具体的思路是：

1.定义一个默认隐藏的div；

2.通过js控制div缓慢加载出来，同事播放提示音；

3.通过js控制div延迟隐藏；

下面是我实现的一个小demo，大家尽情吐槽，也可以帮忙完善它。

下面是这个demo的html部分：

<div id="pop" style="display:none;">
    <div id="popHead">
    <a id="popClose" title="关闭">关闭</a>
    <h2>告警提示</h2>
    </div>
    <div id="popContent">
    <dl>

        <dd id="popIntro">紧急告警，请及时处理</dd>
    </dl>
    <p id="popMore"><a href="#" target="_blank">查看 ?</a></p>
    </div>
    </div>
<div id="div1"></div>

说明：上面的代码一部分是定义了一个div，也就是要弹出的窗口；还有一个div，也就是id=div1的区域，是隐藏加载一个wav格式提示音的部分。

再看一下实现的js部分的代码：

<script type="text/javascript">

        //弹窗实现方法
        function showMessage (widht,height) {
            var TopY=0;//初始化元素距父元素的距离
            $("#pop").css("width",widht+"px").css("height",height+"px");//设置消息框的大小
            $("#pop").slideDown(1000).delay(10000).fadeOut(400);//弹出,并延时关闭
            $("#popClose").click(function() {//当点击关闭按钮的时候
                $('#pop').hide();
            });
            $(window).scroll(function() {
                 $("#pop").css("top", $(window).scrollTop() + $(window).height() - $("#pop").height());//当滚动条滚动的时候始终在屏幕的右下角
                 TopY=$("#pop").offset().top;//当滚动条滚动的时候随时设置元素距父原素距离
             });
        }


        //播放提示音的方法
        function playMusic(url){
            //some code;
            var div = document.getElementById('div1');
             div.innerHTML = '<embed src="'+url+'" loop="0" autostart="true" hidden="true"></embed>';
        }

        //检查是否有最新告警
        function checkAlert(){
            $.ajax({
                type: 'POST',
                url: 'event.do',
                data: {id:"",nodeId:"nodeId"},
                success: function(msg){
                        if (true) {
                            showMessage(248,160);
                            playMusic('phone.wav');
                        };
                    }
            });
        }

        //定时任务
        function timeTask(){
            var taskName = setInterval("showMessage(248,160)",15000);
        }
</script>
<script type="text/javascript">
        $(document).ready(function(){
            timeTask();
        });
</script>

上面的代码注释已经比较清楚了，不再废话了，然后还有就是对窗口进行修饰的css部分：

<style type="text/css">
    *{margin:0;padding:0;}
    #pop{background:#fff;width:260px;border:1px solid #e0e0e0;font-size:12px;position: fixed;right:10px;bottom:10px;}
    #popHead{line-height:32px;background:#f6f0f3;border-bottom:1px solid #e0e0e0;position:relative;font-size:12px;padding:0 0 0 10px;}
    #popHead h2{font-size:14px;color:#666;line-height:32px;height:32px;}
    #popHead #popClose{position:absolute;right:10px;top:1px;}
    #popHead a#popClose:hover{color:#f00;cursor:pointer;}
    #popContent{padding:5px 10px;}
    #popTitle a{line-height:24px;font-size:14px;font-family:'微软雅黑';color:#333;font-weight:bold;text-decoration:none;}
    #popTitle a:hover{color:#f60;}
    #popIntro{text-indent:24px;line-height:160%;margin:5px 0;color:#666;}
    #popMore{text-align:right;border-top:1px dotted #ccc;line-height:24px;margin:8px 0 0 0;}
    #popMore a{color:#f60;}
    #popMore a:hover{color:#f00;}
</style>

这样这个例子就完成了，来看一下效果如何

最后提供一下这个demo的完整代码

完整demo代码———-[You can fork it from github]