利用js實現仿win10桌面彈出窗口提示代碼



21 83 28



特效描述:利用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

加群請備注:從官網了解到

老夫子电子 北京11选5一定牛走势 快乐12开奖杀号技巧 北京pk10官网开奖 山东十一选五任二遗漏 网上开麻将馆代理商 百赢棋牌捕鱼赢钱技巧 美女捕鱼龙晶 天天海南麻将安装 高频彩票稳赚不赔秘密 靠谱的app试用赚钱 聋哑人中彩票 贵州麻将玩法及规则 3d图库 777彩票游戏 地下城与勇士可以多开赚钱么 七乐彩17067