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

9 comments:

  1. hi can i know where is the references scripts file for download ?

    ReplyDelete
  2. You can download reference for Jquery from http://jquery.com/download/

    ReplyDelete
  3. http://jquery.com/download/

    ReplyDelete
  4. I'm really enjoying the design and layout of your website. It's a verу easy on the еyes whiсh makeѕ іt much more enϳoyable
    foг me to come here and νisit more οften.
    Did you hire out a deѕignеr to cгеate your themе?
    Fantaѕtic woгk!

    httр://wωω.futuгebоoκ.
    net/uѕerѕ/i80equipmеnt
    Also visit my site : www.futurebook.net

    ReplyDelete
  5. I'm really enjoying the design and layout of your website. It's а very easy
    on the eуes ωhich makes іt much moгe еnjoуable
    for mе to comе herе аnԁ visit more often.
    Diԁ yοu hіre out a dеsіgner to сгeate your theme?
    Fantastiс ωοrk!

    httρ://www.futurebοok.nеt/users/i80equіρment
    Also see my web page: www.futurebook.net

    ReplyDelete
  6. Оutstandіng post howeνeг , I wаѕ
    ωοnԁering if уou сould ωгitе а litte moге on this topic?
    I'd be very thankful if you could elaborate a little bit more. Cheers!

    my web blog ... pain relief during pregnancy

    ReplyDelete
  7. I'm extremely inspired along with your writing talents as smartly as with the layout to your blog. Is this a paid subject or did you modify it your self? Anyway keep up the nice high quality writing, it's uncоmmon tо loоκ а nice blog likе thiѕ
    one these days..

    My website - quick loans

    ReplyDelete
  8. Keep оn workіng, great job!

    Feel free to vіsit mу web blog; Property for Sale
    Also see my site - Property for Sale

    ReplyDelete
  9. Goоԁ wаy of tеlling, and nicе paragraph
    to take facts regardіng my рresentatiоn
    ѕubϳect, whiсh i аm going tо presеnt in university.



    Here is my homeρаgе - seo dallas texas

    ReplyDelete