在做網頁的時候常常會遇到這麼一個需求，就是當我們做完一定的背景操作，比如說資料庫更新之後，需要給使用者一個提示資訊，然後再轉向到其他頁面。
通常我們怎麼做呢？利用JS自帶的alertbox嗎？那個太簡陋了，或者利用showModelDialog彈出一個網頁嗎？那個速度太慢又太醜陋。也許有人會利用JS
來做一些特效，但是今天我在這裡介紹一種利用JQuery架構就能輕松做到的辦法。
下面，就讓我們做一個基本的aspx頁面，如下：
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JAlertBox.aspx.cs" Inherits="BlogNet.JQuery.JAlertBox" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml" >
6 <head runat="server">
7 <title>JQuery AlertBox</title>
8 <link rel="stylesheet" media="all" type="text/css" href="../CSS/JPrompt.css" />
9
10 </head>
11 <body>
12 <form id="form1" runat="server">
13 <div>
14 <asp:Button ID="btnAlert" runat="server" Text="My AlertBox" OnClick="btnAlert_Click" />
15 </div>
16 </form>
17 </body>
18 </html>
然後，我們需要寫一個自定義的AlertBox的JS函數，為了日後友善管理，我們可以把它寫在一個叫做JAlertBox.js的檔案中，如下：
1 function JAlertBox() {
2 strHtml = "<img src='../Images/my_logo.gif' border='none'><br><p style='font-family: Arial; font-size: 13pt; font-weight: bold; color: #408AB8;'>Here is your title!<p>"
3 + "<p style='font-family: Arial; font-size: 13pt; font-weight: bold; color: #999999;'>Here is your text.</p>";
5 function transferLink() {
6 location.href = 'JAlertBox2.aspx';
7 }
8
9
10 $.prompt(strHtml,
11 {
12 callback: transferLink,
13 prefix: 'cleanblue',
14 buttons: { OK: 'OK' }
15 });
16 }
在按鈕的Click事件中，可以這麼整：
1 protected void btnAlert_Click(object sender,EventArgs e)
2 {
3 string myScript = @"
4 <script type='text/javascript' src='../JsLib/jquery-1.3.2.min.js'></script>
5 <script type='text/javascript' src='../JsLib/jquery-impromptu.2.5.min.js'></script>
6 <script type='text/javascript' src='../JS/JAlertBox.js'></script>
7 <script type='text/javascript'>
8 $(document).ready(function() {
9 JAlertBox();
10 });
11 </script>";
12
13 Response.Write(myScript);
14
15 }
轉向頁面的代碼如下你可以自己任意寫一個。
運作下看看效果如何：
AlertBox效果如下：
這是轉向頁面：
![vue搭建過程及出現問題[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)