Show jQuery notification pop up message box and hide after 5 seconds in asp.net

Notification pop up message box using jQuery in asp.netIntroduction: In this article i am going to share the trick to show notification pop up message box in asp.net using jQuery that will hide after 5 seconds after displaying the message. In previous articles i explained Show Message Box in asp.net web application like window application and Show message box and redirect to another page or website and Ajax ModalPopupExtender example to open login form in popup window and Best example to implement stylish jQuery form validations and Show jQuery tooltip message on mouse over

Description:  While developing web application we need to show message box or notification pop up frequently. For example to show the Message like "Record saved successfully", "Record could not be saved" or "Record deleted successfully" etc. But in web forms there is no inbuilt feature to show message box. So we need to create our own custom notification/message box using jQuery that popup and display the message.

Implementation: Let's create a demo website page to demonstrate the notification pop up message box.
  • First of all we will create style for the notification message box. So in the solution explorer, right click on your website and click on "Add New Item" -> select "Style Sheet" and keep the default name "Stylesheet.css"
  • In the StyleSheet.css paste the following.

.notification
{
    background-color:#006699;
    min-height:40px;
    width:30%;
    margin:0 auto;
    text-align:center;
    line-height:50px;
    color:#fff;
    font-size:18px;
    box-shadow: 10px 10px 5px #888888;
}
  • In the <Head> tag of the design page(default.aspx) paste the following.

<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function(){
        $('#<%=dvMsg.ClientID%>').fadeOut(5000,function(){
        $(this).html(""); //reset label after fadeout
        });
       });   
    </script>

  •  In the <Body> tag place a button control and create the <div> tag having label control which will contain the message as:

 <div id="dvMsg" class="notification" runat="server" visible="false">
    <asp:Label ID="lblMsg" runat="server"></asp:Label>
    </div>
   
        <asp:Button ID="btnShowMsg" runat="server" Text="Show"
            onclick="btnShowMsg_Click" />

Asp.Net C# code to show notification popup
  • In the code behind file (default.aspx.cs) write the code on show button click as:

protected void btnShowMsg_Click(object sender, EventArgs e)
    {
        dvMsg.Visible = true;
        lblMsg.Text = "This is notification message demo";
    }

 Asp.Net VB code to show notification popup
  • In the code behind file (default.aspx.vb) write the code on show button click as:

protected void btnShowMsg_Click(object sender, EventArgs e)
    {
        dvMsg.Visible = true
        lblMsg.Text = "This is notification message demo"
    }
  
Now over to you:
" I hope you have got how to display notification message in Asp.Net using jquery If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates."
Previous
Next Post »

7 comments

Click here for comments
Unknown
admin
February 16, 2014 ×

Very Nice....

Reply
avatar
February 17, 2014 ×

Hi Shaiwal Trupathi..I am glad you found this article useful..stay connected and keep reading..:)

Reply
avatar
Unknown
admin
March 19, 2014 ×

Hi Lalit Raghuvanshi, I'm tried your demo it's work fine until I add another button it's show message after I click the other button, I mean every post back fired this message
please can you help me to fix this issue.
my Regards

Reply
avatar
March 19, 2014 ×

Hi Hussain Salman..On page load just write the line dvMsg.Visible = false;
it will solve your issue..

Reply
avatar
Unknown
admin
March 20, 2014 ×

It's work now thanks for your answer. I love your blog.

Reply
avatar
March 20, 2014 ×

Hello Hussein Salman..i am glad your problem is solved..:)

Reply
avatar
Anonymous
admin
March 30, 2014 ×

sir,how it works in a page without button.

Reply
avatar

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..