利用js实现仿win10桌面弹出窗口提示代码



13 49 17



特效描述:利用js实现 仿win10桌面 弹出窗口 提示代码,利用js实现仿win10桌面弹出窗口提示代码

代码结构

1. 引入JS

<script src="js/d-toast.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="js/d-toast.min.js" type="text/javascript" charset="UTF-8"></script>

2. HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body style="height:3000px;">
<textarea rows="5" id="text" style="width: 560px;" placeholder="这里输入提示的内容" ></textarea>
</br>
<button type="button" onClick="test(1)">桌面通知无图片</button>
<button type="button" onClick="test(2,true)">桌面通知有图片</button>
<button type="button" onClick="testInner(3)">仿桌面通知无图片</button>
<button type="button" onClick="testInner(4,true)">仿桌面通知有图片</button>
<button type="button" onClick="testOnlyContent()">参数仅内容</button>
<script type="text/javascript">
	var el=document.getElementById("text");
	function test(i,isShowIcon){
		//需允许浏览器通知
		var config={
			title:"新消息"+i,//通知标题部分  默认 新消息   可选
			body:el.value,//通知内容部分
			data:"abc2",// 是浏览器仿桌面通知 否首选桌面通知 默认否 可选
			onclick:function(data){//监听点击通知   data:可传递参数 可选
				new dToast("桌面通知被点击了 传递参数:"+data);
			},
		}
		if(isShowIcon==true){
			config.icon="img/thumb-"+i+".jpg";//通知的图片 可选
		}
		//桌面通知
		new dToast(config);
	}
	function testInner(i,isShowIcon){
		var config={
			title:"新消息"+i,//通知标题部分  默认 新消息   可选
			body:el.value,//通知内容部分
			inner:true, // 是浏览器仿桌面通知 否首选桌面通知 默认否 可选
			onclick:function(data){ //监听点击通知   data:可传递参数 可选
				new dToast("仿桌面通知被点击了 传递参数:"+data);
			},
			data:"我是仿桌面通知的参数",//可传递参数 可选
			timeout:10000 // 自动关闭 单位毫秒 默认 6500毫秒   timeout<=0 不自动关闭  可选
		}
		if(isShowIcon==true){
			config.icon="img/thumb-"+i+".jpg";//通知的图片 可选
		}
		//仿桌面通知
		new dToast(config);
	}
	function testOnlyContent(){
		new dToast(el.value);
	}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 文字提示框 提示文字 提示框/弹出层

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到