本文介绍一种通过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]