自己制作友好的頁面“確認對話框”

上網時，常遇到這種情況：當點擊某個頁面上某個鏈接時，彈出一個顯示警告、歡迎或注意事項、提示、版權等信息且帶有“確定”和“退出”按鈕的確認對話框(圖1)：若選“確定”則會繼續加載到目標頁面，若選擇“退出”則不繼續，從而給瀏覽者一個反悔的機會。


圖1


　　最常見的這種是通過HTML中的“＜head＞＜/head＞”或“＜body＞＜/body＞”之間的下面這段JavaScript代碼來實現的(不過要注意，在鏈接標簽內的“href="目標頁面的URL"”后空一格還有個“onclick="rusure(); return false;" "width=340,height=163"”語句喲)。

　?。約cript language="JavaScript"＞

　　function rusure()

　　{

　　question = confirm("##") ///##為“相關信息的內容”

　　if (question !="0")

　　{

　　window.open("目標頁面的URL","測試公告窗口","width=340,height=163");///定制確認對話框尺寸及確定后的目標頁面

　　}

　　}

　?。?script＞

　　如果你也正在熱情地做“葉子”，是否感到這有點千篇一律？DIY一個吧！下面(圖2)是我嘗試用頁面定制的一個。過程是：先將要用作按鈕的文字或圖片超鏈接到目標頁面，其HTML源代碼為：＜a href="#" onClick=window.open("目標頁面R的URL","list","scrollbars=no,resizable=no,left=100,top=80,width=300,height=80")＞圖片URL或文本＜/a＞。其中“onClick=window.open”后的括號中的第三個雙引號內是定義新窗口的高度和寬度，并且不顯示工具欄、菜單欄及滾動條而只有一個標題欄。不過特別值得注意的是：“href=”后的雙引號內一定是#；然后再用下面兩種方法之一實現確認對話框DIY：

　　1、用網頁制作軟件去做，制作過程如下：

　　(1)運行你所熟悉的網頁制作軟件(如FrontPage、Dreamwaver等)，新建一個空白頁面，輸入信息文字并設置為居中；

　　(2)另起一行插入一個1行3列的表格，設置表格寬度、邊線寬度及單元格間距等皆為“0”，并設置第1、3單元格寬度為適當像素(我用的是80)且設置中間一個單元格寬度為10像素(這一格中不輸入任何文字，目的是讓兩個按鈕有10像素的間隔)；

　　(3)在第1單元格輸入“確定”二字，設置好屏幕提示信息并設置好超鏈接(注意目標框架設置為新窗口方式)；在第3單元格輸入“退出”二字，設置好屏幕提示信息并設置好超鏈接(因為是關閉本窗口，所以注意在超鏈接地址欄中輸入“javascript:window.close()”)。

　　2、HTML語言法，其設置如下：

　　(1)、在目標頁面的＜body＞和＜/body＞之間寫入如下語句：

　?。紁 align="center"＞

　?。糵ont face="某種字體" color="宋體顏色" size="字號"＞＜b＞設定相關信息文字＜/b＞＜/font＞＜/p＞


圖2

　　(2)在＜body＞和＜/body＞之間寫入如下語句：

　?。糲enter＞

　?。紅able border="0" cellpadding="3" cellspacing="0" style="border-collapse: collapse"＞

　?。紅r＞

　?。?STRONG>td width="80" align="center" bgcolor="#C0C0C0"＞

　?。糵ont face="宋體"＞

　?。糰 style="FONT-SIZE: 10pt; COLOR: #000000" target="_blank" title="想進就“確定”:-)" href="01.htm"＞確定＜/a＞＜/font＞

　?。?td＞

　?。紅d width="10" align="center"＞＜/td＞

　?。紅d width="80" align="center" bgcolor="#C0C0C0"＞

　?。糵ont face="宋體"＞

　?。糰 style="FONT-SIZE: 10pt; COLOR: #000000" title="后悔了?“退出”好啦:-)" href="javascript:window.close()"＞退出＜/a＞＜/font＞＜/td＞

　?。?tr＞

　?。?table＞

　?。?center＞

　　代碼說明：其中“＜table……＞＜/table＞”標簽定制了一個一行三列的表格，且用“＜center＞＜/center＞”將這個表格限制為居中；第一單元格標簽“＜td……＞＜/td＞”定制了其寬度為80像素、居中、單元格背景色為灰等屬性，且定制了確定按鈕字的字體、新窗口打開目標頁面及鼠標指向確定按鈕時的提示信息等；第三單元格標簽“＜td……＞＜/td＞”定制與第一格相同的單元格屬性，且定制了退出按鈕字的字體、鼠標指向退出按鈕時的提示信息及點按退出按鈕后利用“javascript:window.close()”命令關閉窗口。

原文轉自：http://www.kjueaiud.com