JG Vimalan's Blog

It is all about coding!

Display alert, error and custom messages in web pages

I had a requirement from my customer to display error/alert/custom messages on the pages in an asp.net web application based on the scenarios. Here is the alert message I have created for this requirement.

The css I’ve used for this is,

.alert-err{
 background: #fff6bf url(../Images/error.gif) 15px 50% no-repeat;
 text-align: left;
 padding: 0 20px 0 45px;
 border-top: 2px solid #ffd324;
 border-bottom: 2px solid #ffd324;
 margin: 7px 0 15px;
}

.alert-excl{background: #FFF0EF url(../Images/exclamation.gif) 15px 50% no-repeat;
            border-color:#cf3e33;
            text-align: left;
         padding: 0 20px 0 45px;
         margin: 7px 0 15px;
         border-top: 2px solid #cf3e33;
         border-bottom: 2px solid #cf3e33;}

 In the aspx file, I have decorate the div as follow,

<asp:Content ID=”BodyContent” runat=”server” ContentPlaceHolderID=”MainContent”>
   
    <div>   
        This is a test alert message!   
    </div>

    <div>
        This is a test alert message!<br />
        You can add multiple row in this alert message.<br />
        This is simple and looks effective!<br />
    </div>
   
</asp:Content>

This will give you the result as shown in the above image. You can also hide/unhide and set text to div at run time.

Advertisements

October 18, 2010 - Posted by | ASP.NET

No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: