默認的Alert只有一個簡單的對話框，而且無法自定義樣式！有時候彈出的提示需要很詳盡，并且顯得有些冗長，那么如何讓用戶直接看到重點信息呢？因為系統自帶的Alert無法編輯樣式所以我們只好自己重新定義一個了！
先看看我經常使用的信息提示樣式吧！

數據傳遞錯誤

?[軟件編號]：必須是0-9的阿拉伯數字！

這其實就是一個普通的Html表格，里面加上2個操作按鈕！
?完整的HTML代碼如下：
<table?width="300"?border="0"?align="center"?cellpadding="0"?cellspacing="1"?bgcolor="#CCCCCC">
??<tr>
????<td?align="center"?bgcolor="#CCCCCC"><span?class="STYLE1">操作提示</span></td>
??</tr>
??<tr>
????<td?bgcolor="#FFFFFF">&nbsp;</td>
??</tr>
??<tr>
????<td?align="center"?bgcolor="#FFFFFF"><input?type="button"?name="Submit"?value="返回"?onclick="window.history.go(-1)"/>
????<input?type="button"?name="Submit2"?value="關閉"??onclick="window.close()"/></td>
??</tr>
</table> 你可以把這些代碼改成任何你喜歡的樣式，但是最好留下返回和關閉按鈕。PS：沒有操作按鈕就沒法返回上一頁拉！
接下來把這些表格代碼轉換成JS，并且利用JS的“函數重載”重新定義系統自帶的Alert 窗口。
具體代碼如下： <Script?Language="JavaScript">
window.alert=function?(txt)
...{
????document.write?('<table?width="300"?border="0"?align="center"?cellpadding="0"?cellspacing="1"?bgcolor="#CCCCCC">');
????document.write?('??<tr>');
????document.write?('????<td?align="center"?bgcolor="#CCCCCC"><span?class="STYLE1">操作提示</span></td>');
????document.write?('??</tr>');
????document.write?('??<tr>');
????document.write?('????<td?bgcolor="#FFFFFF">'+txt+'</td>');
????document.write?('??</tr>');
????document.write?('??<tr>');
????document.write?('????<td?align="center"?bgcolor="#FFFFFF"><input?type="button"?name="Submit"?value="返回"?οnclick="window.history.go(-1)"/>');
????document.write?('????<input?type="button"?name="Submit2"?value="關閉"??οnclick="window.close()"/></td>');
????document.write?('??</tr>');
????document.write?('</table>');
}
</Script> 一切就緒，現在我們只需要按原來的方法調用Alert就好了

總結

以上是生活随笔為你收集整理的利用Javascript的“函数重载”实现自定义Alert样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。