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

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> 新网页 </title>
<style type="text/css">
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>
<script type="text/javascript">
function showclose() {
    var obj=document.getElementById("closeshow");
    if(obj.style.display=="none")
        obj.style.display="block";
    else
        obj.style.display="none";
}
</script>
</head>
<body>
<input type="button" onclick="showclose();" value="退出" />
<div id="closeshow" style="display:none;">
    <div id="closewindow">
        <div class="msg_block">
            <div class="msg_title">退出</div>
            <div class="msg_content"><p>确定退出？</p><p><input type="button" value="确定" /><input type="button" onclick="showclose();" value="取消" /></p></div>
        </div>
    </div>
    <div id="graydiv">
    </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">&nbsp;È·ÈÏÍ˳ö</td>';
164                                 msg += '</tr>';
165                                 msg += '<tr>';
166                                 msg += '<td align="left" >&nbsp;</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 \'"> &nbsp;&nbsp;&nbsp;';
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>

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/QDuck/p/491349.html