當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

改善用户体验之Alert提示效果

發布時間：2023/12/13 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了改善用户体验之Alert提示效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

功能：替換傳統彈出窗口提示 window.alert("");

好處：界面美觀，友善(最起碼沒有系統報警的聲音）。
　　　引用方便，純js腳本文件實現所有效果。

使用方法：

<!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" xml:lang="zh-CN" lang="zh-CN">
????<head>
????????<title>Alert提示效果腳本</title>
????????<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
????????<meta http-equiv="Content-Language" content="gb2312" />
????????<meta name="KeyWords" content="電力工程造價,價格信息,裝材,設備,電力工程" />
????????<meta name="description" content="電力工程造價信息" />
????????<script type="text/javascript" src="alert.js"></script>
????????<style type="text/css">
????????????*{}{
????????????????margin:0;padding:0;
????????????}
????????</style>
????</head>
????<body>
????

????<div class="cecmbody" id="cecmpolicy">
????????<div class="leftClass">
????????????<p>測試</p><p>測試</p><p>測試</p>
????????????<p>測試</p><p>測試</p><p>測試</p>
????????????<p>測試</p><p>測試</p><p>測試</p>
????????????<input type="button" value="點擊這里" οnclick="sAlert('測試效果');" />
????????????<p>測試</p><p>測試</p><p>測試</p>
????????????<p>測試</p><p>測試</p><p>測試</p>
????????????<p>測試</p><p>測試</p><p>測試</p>
????????</div>
????????<div class="rightClass">
????????</div>????
????</div>
????</body>
</html>
腳本文件alert.js

????????????/**//*
????????????作者：Daviv
????????????博客：http://blog.163.com/jxdawei
????????????時間：2006-10-27
????????????感謝：wenming (Blueidea)
????????????
????????????功能：彈出提示
????????????方法：調用sAlert("您要彈出的信息");????????????
????????????
????????????*/
????????????
????????????function sAlert(str){

????????????var msgw,msgh,bordercolor;
????????????msgw=400;//提示窗口的寬度
????????????msgh=100;//提示窗口的高度
????????????titleheight=25 //提示窗口標題高度
????????????bordercolor="#336699";//提示窗口的邊框顏色
????????????titlecolor="#99CCFF";//提示窗口的標題顏色
????????????
????????????var sWidth,sHeight;
????????????sWidth=document.body.offsetWidth;
????????????sHeight=document.body.offsetHeight;
????????????if (sHeight<screen.height)
????????????{
????????????????sHeight=screen.height;
????????????}

????????????var bgObj=document.createElement("div");
????????????bgObj.setAttribute('id','bgDiv');
????????????bgObj.style.position="absolute";
????????????bgObj.style.top="0";
????????????bgObj.style.background="#777";
????????????bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
????????????bgObj.style.opacity="0.6";
????????????bgObj.style.left="0";
????????????bgObj.style.width=sWidth + "px";
????????????bgObj.style.height=sHeight + "px";
????????????bgObj.style.zIndex = "10000";
????????????document.body.appendChild(bgObj);
????????????
????????????var msgObj=document.createElement("div")
????????????msgObj.setAttribute("id","msgDiv");
????????????msgObj.setAttribute("align","center");
????????????msgObj.style.background="white";
????????????msgObj.style.border="1px solid " + bordercolor;
????????????msgObj.style.position = "absolute";
????????????msgObj.style.left = "50%";
????????????msgObj.style.top = "50%";
????????????msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
????????????msgObj.style.marginLeft = "-225px" ;
????????????msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
????????????msgObj.style.width = msgw + "px";
????????????msgObj.style.height =msgh + "px";
????????????msgObj.style.textAlign = "center";
????????????msgObj.style.lineHeight = (msgh-titleheight) + "px";
????????????msgObj.style.zIndex = "10001";
??
?????????? var title=document.createElement("h4");
?????????? title.setAttribute("id","msgTitle");
?????????? title.setAttribute("align","right");
?????????? title.style.margin="0";
?????????? title.style.padding="3px";
?????????? title.style.background=bordercolor;
?????????? title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
?????????? title.style.opacity="0.75";
?????????? title.style.border="1px solid " + bordercolor;
?????????? title.style.height="18px";
?????????? title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
?????????? title.style.color="white";
?????????? title.style.cursor="pointer";
?????????? title.innerHTML="關閉";
?????????? title.οnclick=function(){
????????????????document.body.removeChild(bgObj);
????????????????document.getElementById("msgDiv").removeChild(title);
????????????????document.body.removeChild(msgObj);
????????????????}
????????????document.body.style.overflow = "hidden";
?????????? document.body.appendChild(msgObj);
?????????? document.getElementById("msgDiv").appendChild(title);
?????????? var txt=document.createElement("p");
?????????? txt.style.margin="1em 0"
?????????? txt.setAttribute("id","msgTxt");
?????????? txt.innerHTML=str;
?????????? document.getElementById("msgDiv").appendChild(txt);
????????????}

轉載于:https://www.cnblogs.com/Bany/archive/2006/12/01/1755510.html

總結

以上是生活随笔為你收集整理的改善用户体验之Alert提示效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Test live writer
下一篇：驳AXAJ的七宗罪 (转)