larry-java學(xué)習(xí)交流空間
hibernate、spring、webwork、struts、Portal、ajax技術(shù)交流

BlogJava :: 首頁 :: 新隨筆 :: 聯(lián)系 :: 聚合

:: 管理

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)

隨筆檔案

文章分類

數(shù)據(jù)庫優(yōu)化(5)

文章檔案

連結(jié)

http://www.blogcn.info/user1/pure2008/
http://www.blogcn.info/user1/pure2008/
http://www.aygfsteel.com/hiswing/
http://www.aygfsteel.com/hiswing/
中國java開發(fā)網(wǎng)
中國java開發(fā)網(wǎng)
中國java技術(shù)網(wǎng)高級論壇首頁
中國java開發(fā)網(wǎng)
學(xué)習(xí)筆記
學(xué)習(xí)筆記

搜索

閱讀排行榜

評論排行榜

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

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

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

現(xiàn)在，當彈出千篇一律的Alert警告框被這樣的一種方式取代時，給人的感覺是相當?shù)男迈r的。

這樣

<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="關(guān)閉";
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) 編輯收藏

新用戶注冊刷新評論列表


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




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理