Post
Ask Question

Custom/Div Based Alert In ASP.NET

The post is about implementing Custom/Div based alert messagebox in ASP.NET, using jQuery/jQuery UI dialog plugin. This can be a required thing when you are asked not to use default Browser alert box.

You may would like to use jQuery UI dialog to implement customized alert/confirm boxes. In this way, you can provide the buttons, messages, title as well as actions, which you desire.

Here, I have written a small Webform to show a customized alert box, using jQuery UI Dialog.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>  
  9.     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>  
  10.     <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />  
  11.     <script type="text/javascript">  
  12.         function AlertBox(msgtitle, message, controlToFocus) {  
  13.             $("#msgDialogAlert").dialog({  
  14.                 autoOpen: false,  
  15.                 modal: true,  
  16.                 title: msgtitle,  
  17.                 closeOnEscape: true,  
  18.                 buttons: [{  
  19.                     text: "Ok",  
  20.                     click: function () {  
  21.                         $(this).dialog("close");  
  22.                         if (controlToFocus != null)  
  23.                             controlToFocus.focus();  
  24.                     }  
  25.                 }],  
  26.                 close: function () {  
  27.                     $("#operationMsgAlert").html("");  
  28.                     if (controlToFocus != null)  
  29.                         controlToFocus.focus();  
  30.                 },  
  31.                 show: { effect: "clip", duration: 200 }  
  32.             });  
  33.             $("#operationMsgAlert").html(message);  
  34.             $("#msgDialogAlert").dialog("open");  
  35.         };  
  36.   
  37.         function ShowMessage() {  
  38.             AlertBox("This is Title", "And This is the content of the message!", null);  
  39.             return false;  
  40.         }  
  41.     </script>  
  42. </head>  
  43. <body>  
  44.     <form id="form1" runat="server">  
  45.         <div id="msgDialogAlert" style="display: none; text-align: center; vertical-align: central">  
  46.             <p id="operationMsgAlert"> </p>  
  47.         </div>  
  48.         <asp:Button Text="Click!" runat="server" OnClientClick="return ShowMessage();" />  
  49.     </form>  
  50. </body>  
  51. </html>  
The result is given below.

You can have Ok, Yes & No, Ok & Cancel. Any combination of buttons are required and can write the code in click event in the code snippet given above.

Similar to this alert box, you can use same method to implement Confirm box, Success message box (which shows by itself and then disappears without any action).