Thursday, March 17, 2011

JavaScript alert box with custom title

               Recently one of my friend got a requirement on customization of  JavaScript alert box.The requirement is  customizing the alert box title.There is no way to customize the alert box title  in Java Script.I have given a solution using jQuery alert box.I have discussed possible ways to implement it and I have mentioned my recommendation also.

  1. Creating new page (.html or .aspx) name it as "Message box" and  pop up it using Window.open(..)..
  2. The second ways is using vb script .But it is only works in IE browser.
  3. Jquery plug in .(Recommended way).The below example demonstrate you how to use jquery alert box plug in .

Add the  following file reference to your page header.

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"/>
  <script src="Scripts/jquery.alerts.js" type="text/javascript"/>
  <link href="Styles/jquery.alerts.css" rel="stylesheet" type="text/css"/>

Add a button in your page



<asp:Button ID="Button" runat="server" Text="Click Me" />

Add this content to your in between  header tag



   1: <script type= "text/javascript" language="javascript">
   1:  
   2:      $(document).ready(function () {
   3:          $("#Button").click(function () {
   4:              jAlert('Wow !My alert message with custom titile','My custom title bar here...');
   5:              return false;
   6:          });
   7:      });
   8:     
</script>

Run the application .Now you can find the following out put .Let me know if you face any issues .CustomTitle