自定义弹窗效果
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2<html>
3 <head>
4 <title></title>
5 <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
6 <meta name="ProgId" content="VisualStudio.HTML">
7 <meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
8 <script language="javascript" type="text/javascript">
9
10//Author:Daviv
11//Blog:http://blog.163.com/jxdawei
12//Date:2006-10-27
13//Email:jxdawei@gmail.com
14
15
function sAlert(str)
{
16
var msgw,msgh,bordercolor;
17 msgw=400;//提示窗口的宽度
18 msgh=100;//提示窗口的高度
19 titleheight=25 //提示窗口标题高度
20 bordercolor="#336699";//提示窗口的边框颜色
21 titlecolor="#99CCFF";//提示窗口的标题颜色
22
23 var sWidth,sHeight;
24 sWidth=document.body.offsetWidth;
25 sHeight=document.body.scrollHeight;
26
27 var bgObj=document.createElement("div");
28 bgObj.setAttribute('id','bgDiv');
29 bgObj.style.position="absolute";
30 bgObj.style.top="0";
31 bgObj.style.background="#777";
32 bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
33 bgObj.style.opacity=0.6;
34 bgObj.style.left="0";
35 bgObj.style.width=sWidth + "px";
36 bgObj.style.height=sHeight + "px";
37 bgObj.style.zIndex = "10000";
38 document.body.appendChild(bgObj);
39
40 var msgObj=document.createElement("div")
41 msgObj.setAttribute("id","msgDiv");
42 msgObj.setAttribute("align","center");
43 msgObj.style.background="white";
44 msgObj.style.border="1px solid " + bordercolor;
45 msgObj.style.position = "absolute";
46 msgObj.style.left = "50%";
47 msgObj.style.top = "50%";
48 msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
49 msgObj.style.marginLeft = "-225px" ;
50 msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
51 msgObj.style.width = msgw + "px";
52 msgObj.style.height =msgh + "px";
53 msgObj.style.textAlign = "center";
54 msgObj.style.lineHeight ="25px";
55 msgObj.style.zIndex = "10001";
56
57 var title=document.createElement("h4");
58 title.setAttribute("id","msgTitle");
59 title.setAttribute("align","right");
60 title.style.margin="0";
61 title.style.padding="3px";
62 title.style.background=bordercolor;
63 title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
64 title.style.opacity="0.75";
65 title.style.border="1px solid " + bordercolor;
66 title.style.height="18px";
67 title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
68 title.style.color="white";
69 title.style.cursor="pointer";
70 // title.innerHTML="关闭";
71
title.onclick=function(){
72
73
}
74 document.body.appendChild(msgObj);
75 document.getElementById("msgDiv").appendChild(title);
76 var txt=document.createElement("p");
77 txt.style.margin="1em 0"
78 txt.setAttribute("id","msgTxt");
79 txt.innerHTML=str;
80 txt.innerHTML+=" <img src='loader.gif'>";
81
82 document.getElementById("msgDiv").appendChild(txt);
83 a(0);
84
}
85 function a(i)
86 {
87 if(i<50)
88 {
89 document.getElementById("bgDiv").style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+i+")"
90
91 i+=10;
92 setTimeout("a("+i+")",100);
93 }
94 }
95 </script>
96 </head>
97 <body>
98 <div onclick="sAlert('要打的字')">点击</div>
99 </body>
100</html>
101
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2
<html>3
<head>4
<title></title>5
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">6
<meta name="ProgId" content="VisualStudio.HTML">7
<meta name="Originator" content="Microsoft Visual Studio .NET 7.1">8
<script language="javascript" type="text/javascript">9
10
//Author:Daviv11
//Blog:http://blog.163.com/jxdawei12
//Date:2006-10-2713
//Email:jxdawei@gmail.com14
15
function sAlert(str){16
var msgw,msgh,bordercolor;17
msgw=400;//提示窗口的宽度18
msgh=100;//提示窗口的高度19
titleheight=25 //提示窗口标题高度20
bordercolor="#336699";//提示窗口的边框颜色21
titlecolor="#99CCFF";//提示窗口的标题颜色22
23
var sWidth,sHeight;24
sWidth=document.body.offsetWidth;25
sHeight=document.body.scrollHeight;26
27
var bgObj=document.createElement("div");28
bgObj.setAttribute('id','bgDiv');29
bgObj.style.position="absolute";30
bgObj.style.top="0";31
bgObj.style.background="#777";32
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=0)";33
bgObj.style.opacity=0.6;34
bgObj.style.left="0";35
bgObj.style.width=sWidth + "px";36
bgObj.style.height=sHeight + "px";37
bgObj.style.zIndex = "10000";38
document.body.appendChild(bgObj);39
40
var msgObj=document.createElement("div")41
msgObj.setAttribute("id","msgDiv");42
msgObj.setAttribute("align","center");43
msgObj.style.background="white";44
msgObj.style.border="1px solid " + bordercolor;45
msgObj.style.position = "absolute";46
msgObj.style.left = "50%";47
msgObj.style.top = "50%";48
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";49
msgObj.style.marginLeft = "-225px" ;50
msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";51
msgObj.style.width = msgw + "px";52
msgObj.style.height =msgh + "px";53
msgObj.style.textAlign = "center";54
msgObj.style.lineHeight ="25px";55
msgObj.style.zIndex = "10001";56
57
var title=document.createElement("h4");58
title.setAttribute("id","msgTitle");59
title.setAttribute("align","right");60
title.style.margin="0";61
title.style.padding="3px";62
title.style.background=bordercolor;63
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";64
title.style.opacity="0.75";65
title.style.border="1px solid " + bordercolor;66
title.style.height="18px";67
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";68
title.style.color="white";69
title.style.cursor="pointer";70
// title.innerHTML="关闭";71
title.onclick=function(){72
73
}74
document.body.appendChild(msgObj);75
document.getElementById("msgDiv").appendChild(title);76
var txt=document.createElement("p");77
txt.style.margin="1em 0"78
txt.setAttribute("id","msgTxt");79
txt.innerHTML=str;80
txt.innerHTML+=" <img src='loader.gif'>";81
82
document.getElementById("msgDiv").appendChild(txt);83
a(0);84
}85
function a(i)86
{87
if(i<50)88
{89
document.getElementById("bgDiv").style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+i+")"90
91
i+=10;92
setTimeout("a("+i+")",100);93
}94
}95
</script>96
</head>97
<body>98
<div onclick="sAlert('要打的字')">点击</div>99
</body>100
</html>101
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
