larry-java學習交流空間
hibernate、spring、webwork、struts、Portal、ajax技術交流

BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合

:: 管理

posts - 40, comments - 4, trackbacks - 0

<

2025年5月

>

日

一

二

三

四

五

六

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

7

常用鏈接

留言簿(2)

隨筆檔案

文章分類

數據庫優化(5)

文章檔案

連結

http://www.blogcn.info/user1/pure2008/
http://www.blogcn.info/user1/pure2008/
http://www.aygfsteel.com/hiswing/
http://www.aygfsteel.com/hiswing/
中國java開發網
中國java開發網
中國java技術網高級論壇首頁
中國java開發網
學習筆記
學習筆記

搜索

閱讀排行榜

評論排行榜

改善用戶體驗的alert提示效果

今天在經典看到有人把這效果獨立出來了
http://bbs.blueidea.com/thread-2688074-1-1.html

如同Lightbox的效果那邊，或者說和Windows關閉系統前的那一刻類似，為突出顯示主題而采取的暗淡背景的方法在Web2.0的站點風格中被越來越多的使用。
(關于Lightbox：http://www.cnbruce.com/blog/showlog.asp?cat_id=34&log_id=1005 )

現在，當彈出千篇一律的Alert警告框被這樣的一種方式取代時，給人的感覺是相當的新鮮的。

這樣

<input type="button" value="點擊這里" onclick="sAlert('測試效果<br>還可以直接書寫HTML代碼 <br>&copy; 2006');" />
<script type="text/javascript" language="javascript">
//Author:Daviv
//Blog:http://blog.163.com/jxdawei
//Date:2006-10-28
//Email:jxdawei@gmail.com
function sAlert(str){
var msgw,msgh,bordercolor;
msgw=400;//提示窗口的寬度
msgh=100;//提示窗口的高度
bordercolor="#336699";//提示窗口的邊框顏色
titlecolor="#99CCFF";//提示窗口的標題顏色
var sWidth,sHeight;
sWidth=document.body.offsetWidth;
sHeight=document.body.offsetHeight;
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";
document.body.appendChild(bgObj);
var msgObj=document.createElement("div")
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.position="absolute";
msgObj.style.background="white";
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.border="1px solid " + bordercolor;
msgObj.style.width=msgw + "px";
msgObj.style.height=msgh + "px";
msgObj.style.top=(document.documentElement.scrollTop + (sHeight-msgh)/2) + "px";
msgObj.style.left=(sWidth-msgw)/2 + "px";
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.onclick=function(){
document.body.removeChild(bgObj);
document.getElementById("msgDiv").removeChild(title);
document.body.removeChild(msgObj);
}
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);
}
</script>

[Ctrl+A 全部選擇進行拷貝提示：可先修改部分代碼，再點擊運行]

把SCRIPT做成一個JS文件就可以了。

posted on 2007-04-02 17:59 larryjava 閱讀(91) 評論(0) 編輯收藏

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理