利用JQuery制作自定义Alert Box

在做网页的时候常常会遇到这么一个需求，就是当我们做完一定的后台操作，比如说数据库更新之后，需要给用户一个提示信息，然后再转向到其他页面。

通常我们怎么做呢？利用JS自带的alertbox吗？那个太简陋了，或者利用showModelDialog弹出一个网页吗？那个速度太慢又太丑陋。也许有人会利用JS

来做一些特效，但是今天我在这里介绍一种利用JQuery框架就能轻松做到的办法。

 

首先，你需要下载最新的JQeruy框架和本实例需要用到的CSS文件和JS插件 ，笔者在这里提供下载 /Files/davidgu/JQuery.zip

 

下面，就让我们做一个基本的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> " ;
 4 
 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效果如下：

 

 

 

这是转向页面：