Jquery实现右下角弹窗警告并且实现提示声

前端时间公司有需求，需要将报警信息以右下角弹窗的形式展示客户，报警信息对客户很重要要求之前弹出的信息需要存在，所以基于这个需求写了一个jq的弹窗方法配合websocket实现后台向用户端的主动示警并且报警声提示，希望可以帮助到有类似需求的程序猿

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script src="jquery-1.6.4.js" ></script>
<style>
#warnTipBox .warnTip .tip-head{width: 100%;height: 30px;line-height: 29px;background-color: #4e6ef2;padding-left: 10px;
}
#warnTipBox .warnTip .tip-content{width:100%;height:100%;background:#FFF;padding: 20px 10px 20px 20px;font-size: 15px;
}
#warnTipBox .warnTip .tip-close{color: #FFFF;border-radius: 12px;line-height: 20px;text-align: center;height: 20px;width: 20px;font-size: 18px;padding: 1px;top: 3px;right: -2px;position: absolute;
}
#warnTipBox  .warnTip .tip-close:before {content: "\2716";
}
</style>
</head>
<body></body>
<script type="text/javascript" >//报警弹框
var warmTip={//初始化弹框init:function(options) {//定义默认参数var defaults={title:"报警提示",width:270,height:300,content:"",//可传入html字符串  eg:<a href=''></a>speed:1000,//滑动速度soundObj:{//声音控制open:true, //是否开启audioSrc:"http://downsc.chinaz.com/files/download/sound1/201406/4611.wav"},onClose:function(){}//点取消后执行的函数}options=$.extend(defaults,options);//方法集var methods={//生成idcreateTipId:"tip_"+new Date().getTime(),//计算向下隐藏高度getBottm:(options.height+82)||82,getLength:$(".warnTip").length,getZindex:function(length){return 9999+(length*2)},createTipBox:function(){return $("#warnTipBox").length<=0?$('<div id="warnTipBox"></div>').appendTo('body'):$("#warnTipBox");},createHtml:function(options){var h=`<div id= ${options.id} ><div class="warnTip" style="position:fixed;right:5px;bottom:-${options.bottom}px;z-index:${options.zIndex};width:${options.width}px;box-shadow:-1px 9px 15px 1px #888888;">`;h+=`<span class="tip-close"></span>`;h+=`<div class="tip-head">${options.title}</div>`;h+=`<div class="tip-content">${options.content}</div>`;h+=`</div></div>`;return h;}}//报警声音基础var warnSoundControl={//创建H5媒体标签createAudio:function(options){debuggerif(options.soundObj.open&&typeof(options.soundObj.audioSrc)=="undefined") {console.log("无音频");return};return $("#warnTipBox .warnSound").length<=0?$('<audio class="warnSound" src="'+options.soundObj.audioSrc+'" loop="loop">你的浏览器不支持HTML5</audio>').appendTo('#warnTipBox'):$("#warnTipBox .warnSound");},//监听状态ListenStatus:function(el){var audioStatus=false;el[0].addEventListener("pause", function(){audioStatus=false});el[0].addEventListener("playing", function(){audioStatus=true});return audioStatus;},play:function(el){el[0].play()},pause:function(el){el[0].pause()}}//事件集var events={//向上滑slideUp:function($el){$el.find(".warnTip").animate({height:options.height+'px',bottom:'0px'},options.speed)},//关闭close:function($el){$el.find(".tip-close").unbind("click").bind("click",function(){//向下滑出$el.find(".warnTip").animate( {height:'0px',bottom:'0px'},options.speed,function(){ options.onClose();$el.remove();//关闭盒子//关闭报警声if(warmTip.getWarnTipNum()<=0){warnSoundControl.pause($("#warnTipBox .warnSound"))$("#warnTipBox").remove();}    });})}}new function() {var tipId=methods.createTipId;options["id"]=tipId;options["bottom"]=methods.getBottm;var length=methods.getLength;options["length"]=length;options["zIndex"]=methods.getZindex(length);var box=methods.createTipBox();if(options.soundObj.open){var $audio=warnSoundControl.createAudio(options);if(typeof($audio)!="undefined"&&!warnSoundControl.ListenStatus($audio)){warnSoundControl.play($audio);}}var h=methods.createHtml(options);$("#warnTipBox").append(h);var $el=$("#"+tipId);events.slideUp($el)events.close($el);} (methods,events,options);},//获取当前报警弹框数getWarnTipNum:function(){return $("div[id^='tip_']").length;}
}//测试
for(var i=1,j=6;i<j;i++){//弹出提示warmTip.init({content:"<a>这时第("+i+")个警告信息窗口</a>",soundObj:{open:true,audioSrc:"http://downsc.chinaz.com/files/download/sound1/201406/4611.wav"},onClose:function(){//alert("关闭当前弹窗("+i+")");}})
}
</script>
</html>

弹窗实现了简单的动画效果（自下而上弹出，关闭时自上而下消失），同时方法可更具需要进行扩展

效果展示:

Jquery实现右下角弹窗警告并且实现提示声相关推荐

php 右下脚弹窗,多种样式jQuery网页右下角弹出提示信息代码
多种样式jQuery网页右下角弹出提示信息代码,extjs右下角消息提示框,Jquery Messager消息弹出插件. 查看演示下载资源: 14 次下载资源下载积分: 20 积分 js代码 $ ...
获取大麦网孟鹤堂演出数据并播报和在右下角弹窗提示
#!/usr/bin/env python # coding=utf-8#!/usr/bin/env python # coding=utf-8 # 获取大麦网孟鹤堂演出数据并播报和在右下角弹窗提示i ...
【jQuery】纯js的右下角弹窗
这个弹窗是如下图的效果: 打开网页的时候,这个弹窗会淡入,之后点击右上角的关闭按钮,其实就是一个& times;会淡出. 采用淡入淡出是因为直接Jquery一个fadeIn与fadeOut省事 ...
python获取股市股票数据并播报和右下角弹窗提示，利用datetime和win32com模块，有针对性选择大盘晴雨表卡片
#!/usr/bin/env python # coding=utf-8 # 获取股票数据并播报和弹窗提示import requests, re import win32com.client impo ...
Qt4.8.2 模仿QQ右下角弹窗提示
今天在CSDN偶然看到一位前辈用JAVA写的QQ右下角弹窗提示,而自己正在学习Qt,所以也自己试着写一下,虽然代码乱的一塌糊涂,但最后还是能够运行了. 程序最终运行: 输入内容并点击确定的时候,从右下 ...
php 右下脚弹窗,纯js的右下角弹窗实例代码
下面小编就为大家带来一篇纯js的右下角弹窗实例代码.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧这个弹窗是如下图的效果: 打开网页的时候,这个弹窗会淡入,之后点击右上 ...
QML实现桌面右下角弹窗
实现效果这次制作的桌面右下角弹窗,主要功能有透明度和位置动画.定时关闭.鼠标放在上面暂留. 实现思路首先,我们需要获取桌面大小,然后 move 到右下角去,这里借助的 Screen: //初始位置 ...
局域网屏幕共享_私自更换屏幕，苹果iPhone 11/Pro/Pro Max会弹窗“警告”
据iFixit消息,iPhone 11.iPhone 11 Pro.iPhone 11 Pro Max在升级iOS 13.1之后,苹果会对私自更换非官方屏幕以及未认证的官方屏幕的iPhone进行弹窗警 ...
jQuery实现广告弹窗
首先设置一个固定的窗口位于右下角,效果如下: 代码: jQuery实现广告弹窗.html 之后将该窗口初始设为隐藏,通过代码实现3秒自动显示,5秒自动隐藏,其效果如下: 1 <!DOCTYPE ...
WPF 右下角弹窗的简单实现
软件中经常出现右下角弹窗,从下面缓缓弹出的,这次就做个简陋的实现, 思路就是在窗口加载和关闭时执行动画DoubleAnimation 今天懒得做界面了,只实现了功能. 看看效果: 下面看看代码: 主窗 ...

Jquery实现右下角弹窗警告并且实现提示声

Jquery实现右下角弹窗警告并且实现提示声相关推荐

最新文章

热门文章