Use JQuery Make a custom Alert Box

In doing web page, it is often encounter such a demand, that is, when we finished some background operations, such as database updates, need to give the user a message, and then turned to other pages.

Usually how we do it? JS comes alertbox use it? That too simple, or use showModelDialog up a page? That too slow and too ugly. Maybe someone will use JS

To do some special effects, but today I am here to introduce a framework can easily be done using the JQuery way.

 

First, you need to download the latest JQeruy framework and the need to use this example CSS file and JS plugin, the author here available for download /Files/davidgu/JQuery.zip

 

Now, let us do a basic aspx page, as follows:

 

 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 >

 

Then, we need to write AlertBox of a custom JS function, in order to facilitate the management of the future, we can write it in a file called JAlertBox.js in, as follows:

 

 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  }

 

In the Click event of the button, so to the whole:

 

 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          }

 

Turn the page code looks like you can own any write one.

How well run and see:

 

AlertBox effect is as follows:

 

 

 

This is turn the page:

 

 

 

Reproduced in: https: //www.cnblogs.com/davidgu/archive/2009/06/19/1506792.html