無意間對163郵箱的層確認對話框產生了興趣，彈出一個層來詢問用戶的操作，其它部分用陰影覆蓋，看上去比較爽，于是決定做一個這樣的樣式用于公司的OA系統中。以下是JS實現代碼：?

Code
??1 // eTarget:???按鈕ID
??2 // eArgument:?按鈕事件參數,一般為''.
??3 // msgtitle:??提示信息的標題.
??4 // msgcontent:提示信息的內容.
??5 // selecttype:彈出的對話框類型.
??6 // cancelfun:?當用戶點擊取消按鈕時要執行的客戶端Javascript函數.無則傳入null.
??7 function ?ShowMsg(eTarget,eArgument,msgtitle,msgcontent,selecttype,cancelfun) {?
??8 ??? // 有沒有__EVENTTARGET和eTarget按鈕
??9 ??? if (selecttype >= 1 ? && ( ! document.getElementById( " __EVENTTARGET " ) ||! document.getElementById(eTarget)))
?10 ??? {
?11 ???????? return ?window.confirm(msgcontent);
?12 ???}
?13 ??? var ?msgw,msgh,bordercolor;?
?14 ???msgw = 400 ; // 確認層的寬度
?15 ???msgh = 150 ; // 確認層的高寬度
?16 ???titleheight = 25 ? // 瓢蟲的高度
?17 ???bordercolor = " #ff6600 " ; // 邊框顏色
?18 ???titlecolor = " #ff6600 " ; // 標題顏色
?19 ???btnborderstyle = " 1px?solid?#ff6600 " ; // 按鈕邊框風格
?20 ???btnbgcolor = " #FE8433 " ; // 按鈕背景色
?21 ??
?22 ??? var ?sWidth,sHeight;?
?23 ???sWidth = document.body.offsetWidth;?
?24 ???sHeight = screen.height;?
?25 ???sWidth? = ?document.body.clientWidth;
?26 ??? if (document.body.scrollWidth > sWidth) {
?27 ????????sWidth? = ??document.body.scrollWidth;?
?28 ???}
?29 ???sHeight? = ?document.body.clientHeight;
?30 ??? if (document.body.scrollHeight > sHeight) {
?31 ????????sHeight? = ??document.body.scrollHeight;?
?32 ???}
?33 ??? var ?bgObj = document.createElement( " div " );?
?34 ???bgObj.setAttribute( ' id ' , ' bgDiv ' );?
?35 ???bgObj.style.position = " absolute " ;?
?36 ???bgObj.style.top = " 0 " ;?
?37 ???bgObj.style.background = " #777 " ;?
?38 ???bgObj.style.filter = " alpha(opacity=30) " ;
?39 ???bgObj.style.MozOpacity? = ? 30 / 100;
?40 ???bgObj.style.left = " 0 " ;?
?41 ???bgObj.style.width = sWidth? + ? " px " ;?
?42 ???bgObj.style.height = sHeight? + ? " px " ;???
?43 ???bgObj.style.zIndex? = ? " 10000 " ;?
?44 ???document.body.appendChild(bgObj);?
?45 ????
?46 ??? var ?msgObj = document.createElement( " div " )?
?47 ???msgObj.setAttribute( " id " , " msgDiv " );?
?48 ???msgObj.setAttribute( " align " , " center " );?
?49 ???msgObj.style.background = " white " ;?
?50 ???msgObj.style.border = " 1px?solid? " ? + ?bordercolor;?
?51 ???msgObj.style.position? = ? " absolute " ;?
?52 ???msgObj.style.left? = ? " 50% " ;?
?53 ???msgObj.style.top? = ? " 50% " ;?
?54 ???msgObj.style.font = " 12px/1.6em?Verdana,?Geneva,?Arial,?Helvetica,?sans-serif " ;?
?55 ???msgObj.style.marginLeft? = ? " -225px " ?;?
?56 ???msgObj.style.marginTop? = ? - 75 + document.documentElement.scrollTop + " px " ;?
?57 ???msgObj.style.width? = ?msgw? + ? " px " ;?
?58 ???msgObj.style.height? = msgh? + ? " px " ;?
?59 ??? if (selecttype ==- 1 || selecttype == 0 ) {
?60 ????????msgObj.style.height = msgh - 50 + " px " ;
?61 ???} ?
?62 ???msgObj.style.textAlign? = ? " center " ;?
?63 ???msgObj.style.lineHeight? = " 25px " ;?
?64 ???msgObj.style.zIndex? = ? " 10001 " ;?
?65 ????
?66 ??? var ?title = document.createElement( " h4 " );?
?67 ???title.setAttribute( " id " , " msgTitle " );????
?68 ???title.style.margin = " 0 " ;?
?69 ???title.style.padding = " 3px " ;?
?70 ???title.style.background = bordercolor;?
?71 ???title.style.filter = " progid:DXImageTransform.Microsoft.Alpha(startX=20,?startY=20,?finishX=100,?finishY=100,style=1,opacity=75,finishOpacity=100); " ;?
?72 ???title.style.opacity = " 0.75 " ;?
?73 ???title.style.border = " 1px?solid? " ? + ?bordercolor;?
?74 ???title.style.height = titleheight + " px " ;?
?75 ???title.style.font = " 12px?Verdana,?Geneva,?Arial,?Helvetica,?sans-serif " ;?
?76 ???title.style.color = " white " ;
?77 ??????
?78 ??? if (selecttype ==- 1 )
?79 ??? {
?80 ???????title.setAttribute( " align " , " left " );?
?81 ???????title.innerHTML = msgtitle;
?82 ???}
?83 ??? else ? if (selecttype == 0 ) // add?close
?84 ??? {
?85 ???????title.style.cursor = " pointer " ;?
?86 ???????title.setAttribute( " align " , " right " );?
?87 ???????title.innerHTML = " Close " ;?
?88 ???????title.onclick = function () {?
?89 ??????????????document.body.removeChild(bgObj);?
?90 ??????????????document.getElementById( " msgDiv " ).removeChild(title);?
?91 ??????????????document.body.removeChild(msgObj);?
?92 ?????????????? // 取消后執行
?93 ?????????????? if (cancelfun != null && cancelfun != '' )
?94 ?????????????? {
?95 ??????????????????cancelfun();
?96 ??????????????}
?97 ????????????} ?
?98 ???}
?99 ??? else
100 ??? {
101 ???????title.setAttribute( " align " , " left " );?
102 ???????title.innerHTML = msgtitle;?????????
103 ???}
104 ???
105 ???document.body.appendChild(msgObj);?
106 ???document.getElementById( " msgDiv " ).appendChild(title);?
107 ??? var ?txt = document.createElement( " p " );?
108 ???txt.style.margin = " 1em?0 " ;
109 ???txt.setAttribute( " id " , " msgTxt " );?
110 ???txt.innerHTML = msgcontent;?
111 ???document.getElementById( " msgDiv " ).appendChild(txt);??
112 ???
113 ??? // add?buttom
114 ??? if (selecttype == 1 ) // 確定
115 ??? {
116 ??????? // buttom
117 ??????? var ?btnok = document.createElement( " a " );?
118 ???????btnok.innerHTML = " OK " ;
119 ???????btnok.style.marginTop = " 10px " ;
120 ???????btnok.style.marginBottom = " 5px " ;??????
121 ???????btnok.style.width? = ? " 40px " ;?
122 ???????btnok.style.height? = " 20px " ;?
123 ???????btnok.style.border = ?btnborderstyle;?
124 ???????btnok.style.background = btnbgcolor;
125 ???????btnok.style.cursor = " pointer " ;?
126 ???????
127 ??????? // 確定事件
128 ???????btnok.onclick = function () {?
129 ??????????????document.getElementById( " msgDiv " ).removeChild(btnok);
130 ?????????????? // 提交
131 ???????????????? var ?theForm? = ?document.forms[ ' form1 ' ];
132 ?????????????? if ?( ! theForm)? {
133 ??????????????????theForm? = ?document.form1;
134 ??????????????}
135 ?????????????? if ?( ! theForm.onsubmit? || ?(theForm.onsubmit()? != ? false ))? {
136 ???????????????? if (document.getElementById( " __EVENTTARGET " ))
137 ???????????????? {
138 ????????????????????theForm.__EVENTTARGET.value? = ?eTarget;
139 ????????????????????theForm.__EVENTARGUMENT.value? = ? '' ;????????????????
140 ????????????????????theForm.submit();
141 ???????????????????? // 服務器返回之前
142 ????????????????????title.innerHTML = " 系統提示 " ;
143 ????????????????????txt.innerHTML = " 數據處理中，請稍等... " ;
144 ????????????????????msgObj.style.height? = " 100px " ;??
145 ????????????????} ???????????????
146 ??????????????}
147 ?????????????} ?
148 ???????
149 ???????document.getElementById( " msgDiv " ).appendChild(btnok);??
150 ???}
151 ??? else ? if (selecttype == 2 ) // 確定,取消
152 ??? {
153 ??????? // 確定
154 ??????? var ?btnok = document.createElement( " a " );?
155 ???????btnok.innerHTML = " 確定 " ;
156 ???????btnok.style.marginTop = " 10px " ;
157 ???????btnok.style.marginBottom = " 5px " ;????????
158 ???????btnok.style.width? = ? " 40px " ;?
159 ???????btnok.style.height? = " 20px " ;?
160 ???????btnok.style.border = ?btnborderstyle;?
161 ???????btnok.style.background = btnbgcolor;
162 ???????btnok.style.cursor = " pointer " ;?
163 ???????
164 ??????? // 取消
165 ??????? var ?btncancel = document.createElement( " a " );?
166 ???????btncancel.innerHTML = " 取消 " ;
167 ???????btncancel.style.marginTop = " 10px " ;
168 ???????btncancel.style.marginBottom = " 5px " ;????????
169 ???????btncancel.style.width? = ? " 40px " ;?
170 ???????btncancel.style.height? = " 20px " ;?
171 ???????btncancel.style.border = ?btnborderstyle;?
172 ???????btncancel.style.background = btnbgcolor;
173 ???????btncancel.style.cursor = " pointer " ;?
174 ???????btncancel.style.marginLeft = " 5px " ;
175 ???????
176 ??????? // 確定事件
177 ???????btnok.onclick = function () {?
178 ??????????????document.getElementById( " msgDiv " ).removeChild(btnok);
179 ??????????????document.getElementById( " msgDiv " ).removeChild(btncancel);?
180 ?????????????? // 提交
181 ??????????????? var ?theForm? = ?document.forms[ ' form1 ' ];
182 ?????????????? if ?( ! theForm)? {
183 ??????????????????theForm? = ?document.form1;
184 ??????????????}
185 ?????????????? if ?( ! theForm.onsubmit? || ?(theForm.onsubmit()? != ? false ))? {
186 ???????????????? if (document.getElementById( " __EVENTTARGET " ))
187 ???????????????? {
188 ????????????????????theForm.__EVENTTARGET.value? = ?eTarget;
189 ????????????????????theForm.__EVENTARGUMENT.value? = ? '' ;????????????????
190 ????????????????????theForm.submit();
191 ???????????????????? // 服務器返回之前
192 ????????????????????title.innerHTML = " 系統提示 " ;
193 ????????????????????txt.innerHTML = " 數據處理中，請稍等... " ;
194 ????????????????????msgObj.style.height? = " 100px " ;??
195 ????????????????} ????????????????
196 ??????????????}
197 ?????????????} ?
198 ???????
199 ??????? // 取消事件??????
200 ???????btncancel.onclick = function () {?
201 ??????????????document.body.removeChild(bgObj);?
202 ??????????????document.getElementById( " msgDiv " ).removeChild(title);?
203 ??????????????document.getElementById( " msgDiv " ).removeChild(btnok);
204 ??????????????document.getElementById( " msgDiv " ).removeChild(btncancel);?
205 ??????????????document.body.removeChild(msgObj);?
206 ?????????????? // 取消后執行
207 ?????????????? if (cancelfun != null && cancelfun != '' )
208 ?????????????? {
209 ??????????????????cancelfun();
210 ??????????????}
211 ?????????????? return ? false ;
212 ?????????????} ?
213 ???????
214 ???????document.getElementById( " msgDiv " ).appendChild(btnok);???????
215 ???????document.getElementById( " msgDiv " ).appendChild(btncancel);
216 ???}
217 ??? return ? false ;???
218 }

?

.aspx?前臺調用如下：?

Code
1 ? < asp:Button? ID ="btnSubmit" ?runat ="server" ?Text ="提交" ?OnClick ="btnSubmit_Click" ?OnClientClick ="return?ShowMsg('btnSubmit','','請你確定','你確定要提交嗎？',2,null);" ? />

?

注意：因為JS提交到服務器需要用到 __EVENTTARGET?、__EVENTARGUMENT ，要是執行時提示 __EVENTTARGET 為空則加入一個 LinkButton 控件就可以了，如： <asp:LinkButton ID="l" runat="server" style="display:none;" />

效果如下：

?

?demo: /Files/jelea/ShowDivMsg.zip

?

彈出一個層來讓用戶確認操作