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

zoukankan html css js c++ java

非常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"> È·ÈÏÍË³ö</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>

查看全文

相关阅读:
Redhat7.x静默安装19C客户端
 利用增量备份修复DG备库中的gap>>>>>>>>>>>有新增数据文件
 利用增量备份修复DG备库中的gap>>>>>>>>>>>无新增数据文件
 ORA-01665 control file is not a standby control file
ORA-01110 ORA-01122 ORA-01110 ORA-01200解决办法
 Zabbix5.0+Grafana可视化部署教程
 RedHat 7.5配置bonding双网卡绑定（转）
11.2.0.1 RAC环境部分磁盘组无法自动挂载，导致数据库实例无法启动（转）
11.2.0.1 RAC环境经典bug CRS-4124: Oracle High Availability Services startup failed.
Git配置SSH及常用命令

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

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

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