非常Cool的网页特效(背景藏，alert样式)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

html { padding:0px; }

body { height:100%; margin:0px; }

#closeshow {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

}

#closewindow {

z-index: 1002;

position: absolute;

width: 100%;

}

#graydiv {

z-index: 1000;

background: #DDDDDD;

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

filter:alpha(opacity=50);

opacity: 0.5;

-moz-opacity: 0.5;

}

.msg_block {

margin-top: 100px;

margin-left: auto;

margin-right: auto;

width: 300px;

}

.msg_title {

border: 1px solid #2982BA;

background-color: #ADDAFB;

border-bottom: 0;

}

.msg_content {

border: 1px solid #2982BA;

background-color: #E6F7FF;

text-align: center;

}

</style>

function showclose() {

var obj=document.getElementById("closeshow");

if(obj.style.display=="none")

obj.style.display="block";

else

obj.style.display="none";

}

</script>

</head>

<body>

</div>

</div>

请问这个是怎么样弄的

我描述一下想必大家都见过XP系统的改变主题的特效

就是改变的时候整个桌面的颜色渐变成灰色

我想说的就是这个效果

本来网页总体颜色是 A 当然A 里面有很多颜色,

当我点击退出登陆的时候总体颜色变成B B只是一中颜色.好象FLASH里的mask一样~比如说灰色

然后网页中间有个窗口里面显示是否退出,然后两个Button 这个窗口是个DIV模拟的.. 当然这是我的猜想..它在网页里面绝对居中

下面是效果的演示,这是我在一个网站上看到的..有没有高手老大介绍一下\

点这里进入

登陆ID: teststyle

登陆PW: 123456789

</body>

</html>

经典啊！next

1 <div style="height:100%;">
  2 <select name="aaa"></select>
  3 <img src="http://www.passport.35.com/images/logout_s.gif;jsessionid=VB_WieF2RHffbzgp" border="0" style="cursor:hand;" onclick="showConfirmMsg1()" />
  4 </div>
  5 <script>
  6
  7     function isObject(obj){
  8         if (obj != null && typeof(obj) != "undefined")
  9             return true;
10         else
11             return false;
12     }
13     //判断是不是对象(或者存不存在)
14
15
16     function focusFirstElement(formName){
17         var form = document.forms[formName];
18         if (!isObject(form) || form.tagName != "FORM")
19             return;
20         var elements = form.elements;
21         for (var i = 0; i < elements.length; i++) {
22             if (elements[i].type == 'text' && !elements[i].disabled) {
23                 elements[i].focus();
24                 break;
25             }
26         }
27     }
28     //将焦点聚焦到Form的中第一个text对象上
29
30
31
32     function fillNumbericOptions(start, end, val){
33         var str = "";
34         for (var i=start; i<=end; i++){
35             str += "<option value='" + i + "'" ;
36             if (i == val)
37                 str += " selected";
38             str += " >" + i + "</option>";
39         }
40         document.write (str);
41     }
42     //填充<select></select> 中的option 并且选中一个
43
44
45     function fillOptions(data, val){
46         var str = "";
47         for (var i=0; i<data.length; i++){
48
49             str += "<option value='" + data[i][0] + "'" ;
50             if (data[i][0] == val)
51                 str += " selected";
52             str += " >" + data[i][1] + "</option>";
53
54         }
55         document.write (str);
56     }
57     //使用二维数组填充<select></select>
58
59
60
61     function hideSelectForm(){
62         var opts = document.getElementsByTagName("SELECT");
63         if (opts == null || typeof(opts) == "undefined")
64             return ;
65
66         for (var i=0; i<opts.length; i++){
67             opts[i].style.visibility = "hidden";
68         }
69     }
70     //隐藏页面中所有的<select></select>
71
72     function showSelectForm(){
73         var opts = document.getElementsByTagName("SELECT");
74         if (opts == null || typeof(opts) == "undefined")
75             return ;
76
77         for (var i=0; i<opts.length; i++){
78
79             opts[i].style.visibility = "visible";
80         }
81     }
82     //显示页面中所有的<select></select>
83
84
85     function createBgDiv(id){
86         if (!isObject(id))
87             id = "backgroundDiv";
88
89         offHeight = window.screen.height;
90         var div = document.createElement("DIV");
91         div.id = id;
92         div.style.left = 0;
93         div.style.top = 0;
94         div.style.width=document.body.scrollWidth;
95         div.style.height = document.body.scrollHeight;
96         div.style.position = "absolute";
97         div.style.display = "";
98         div.style.zIndex = "999";
99         //div.style.filter = "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
100         div.style.backgroundColor="#2A4A6B";
101         document.body.appendChild(div);
102         hideSelectForm();
103         fadeBg(10, id);
104         return div;
105     }
106     //创建div背景,覆盖
107
108     function fadeBg(index, str){
109         var obj = document.getElementById(str);
110         obj.style.filter = "alpha(Opacity=" + index + ")";
111         if (index < 50)
112             window.setTimeout("fadeBg(" + (index+5) + ", '" + str + "')", 10);
113     }
114     //渐渐显示背景
115
116 </script>
117
118
119                        <div id="logoutInfoDiv" style="display:none; "></div>
120                         
121  <script language="javascript">
122         function showConfirmMsg1(){
123                if (!isObject(document.getElementById("logoutDiv")))
124                                         createBgDiv("logoutDiv");
125
126                                     var infoDiv = document.getElementById("logoutInfoDiv");
127
128                                     infoDiv.innerHTML = generateConfirmLogoutMsg();
129
130                                     with(infoDiv.style){
131                                         zIndex = 1000;
132                                         position = "absolute";
133                                         width = "300px";
134                                         top = (document.body.offsetHeight-150)/2 + document.body.scrollTop;
135                                         left = (document.body.offsetWidth-400)/2;
136                                         border = "1px #4372A5 solid";
137                                         padding = "10px";
138                                         backgroundColor = "#ffffff";
139                                         filter = "Alpha(Opacity=90)";
140                                         display = "block";
141                                     }
142
143                             }
144                    //显示提示信息
145
146                             function cancelLogout(){
147                                 var aa = document.getElementById("logoutDiv");
148                                 var infoDiv = document.getElementById("logoutInfoDiv");
149                                     infoDiv.style.display = "none";
150
151                                 if (isObject(aa))
152                                     document.body.removeChild(aa);
153
154                                 showSelectForm();
155                            }
156                         //按钮取消
157
158                             function generateConfirmLogoutMsg(){
159                                 var msg = "";
160
161                                 msg += '<table width="400"  border="0" cellspacing="0" cellpadding="0" >';
162                                 msg += '<tr>';
163                                 msg += '<td bgcolor="DEE8F3" class="Bold_font" height="30"> È·ÈÏÍË³ö</td>';
164                                 msg += '</tr>';
165                                 msg += '<tr>';
166                                 msg += '<td align="left" > </td>';
167                                 msg += '</tr>';
168                                 msg += '</table>';
169                                 msg += '<table width="400"  border="0" cellspacing="0" cellpadding="0" >';
170                                 msg += '<tr>';
171                                 msg += '<td class="register" height="30" align="left">ÄúÈ·¶¨ÒªÍË³ö35Í¨ÐÐÖ¤Âð£¿</td>';
172                                 msg += '</tr>';
173                                 msg += '<tr>';
174                                 msg += '<td align="center" >';
175                                 msg += '<input id="submitB" type="submit" value=" ÍË ³ö " name="input" class="buttomw" onclick="window.location=\'http://login.passport.35.com/logout.srf \'">    ';
176                                 msg += '<input type="button" value=" È¡ Ïû " name="input" class="buttomw" onclick="cancelLogout()">';
177                                 msg += '</td>';
178                                 msg += '</tr>';
179                                 msg += '</table>';
180
181                                 return msg;
182                              }
183                              //信息内容
184                             </script>

相关阅读:
POJ 1185 状压DP
POJ 1321
hdu 1384 查分约束
hdu 2196 树形dp
hdu 4612 双联通缩点+树形dp
poj 3469 最小割模板sap+gap+弧优化
hdu 4858 容器的简单模拟
hdu 4857 逆向拓扑排序+反向输出
isap算法模板poj 1273gap+弧优化最大流
ISAP 算法的学习

原文地址：https://www.cnblogs.com/QDuck/p/491349.html

非常Cool的 网页特效(背景藏，alert样式)

非常Cool的网页特效(背景藏，alert样式)