Click here to Skip to main content
12,360,408 members (56,360 online)
Click here to Skip to main content
Add your own
alternative version

Stats

14.8K views
352 downloads
5 bookmarked
Posted

Jquery Alert Control

, 30 Apr 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
This is a very simple and easy to implement alert control using jQuery

Introduction

We often need to interact with the user at client side for different validation purposes or any other guideline purposes. For all these we prefer easy, light and simple techniques. Alerting the user at client side must be very pretty because users on the Web are now in a habit of attractiveness in everything that they face on the web. I have developed a Message Box using jquery that is very easy to use and looks very pretty. It provides a simple way for developers to raise unobtrusive messages to the end-user.

Background

I named it braviMessageBox. This pop up message box is a floating window that contains a content area. The dialog window closed with the 'x' icon by default.

If the content length exceeds the maximum height, a scrollbar will automatically appear.

Using the Code

braviMessageBox is very easy to use: You need to just add a reference to Jquery and add the braviMessageBox.js file with the braviMessageBox.css.

A quick code look "How to use" is here.

<input type="button" id="btnTest" value="Click Me!" 
onclick="ShowMessage('Testing bravi Message Box..<br />
this is a very pretty jquery message box control!');" />

The technique used in the js file is just create a DIV element and append it to page BODY.

function ShowMessage(message) {
 $("<div class='msg' id='dvMsg'><table width='100%'><tr><td width='90%'>" + 
message + "</td><td width='10%' valign='top' style='float:right;text-decoration:none;'>
<a href='javascript:void();' onclick='closethis(myMessage);'>x</a>
</td></tr></table></div>").attr('id', 'myMessage').appendTo('body');
 setTimeout("$('#myMessage').fadeOut('slow');", 2900);
 setTimeout("$('#myMessage').remove();", 4000);
}

Though this message box will disappear after some time, you can still close it. There is the close method.

function closethis(id) {
 $('#myMessage').fadeOut('slow');
 setTimeout("$('#myMessage').remove();", 1000);
}

Now there is just one CSS class to position the Div in the center of the screen.

The CSS class is:

.msg
 {
  background-color: #4f7eaa;
  text-align: left;
  position: absolute;
  top: 35%;
  left: 40%;
  margin-left: -70px;
  width: 350px;
  height: auto;
  padding: 10px 10px 8px 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
 }

Future Programs

This was my first Post on a Forum. Now I aim to continue it and want to enhance this to a similar pop up dialog page.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

tanweer
Software Developer LIFELONG Pakistan, Islamabad
Pakistan Pakistan
Software Engineer at LIFELONG Pakistan,

http://tanweerbravi.blogspot.com

You may also be interested in...

Comments and Discussions

 
BugCS0234: The type or namespace name 'Tasks' does not exist in the namespace 'System.Threading' (are you missing an assembly reference?) Pin
Mukund Thakker16-May-12 20:10
memberMukund Thakker16-May-12 20:10 
GeneralRe: CS0234: The type or namespace name 'Tasks' does not exist in the namespace 'System.Threading' (are you missing an assembly reference?) Pin
tanweer akhtar16-May-12 22:35
membertanweer akhtar16-May-12 22:35 
QuestionI Agree Pin
onurag194-May-12 6:15
memberonurag194-May-12 6:15 
QuestionAdd a screenshot Pin
Jason Vogel30-Apr-12 11:54
memberJason Vogel30-Apr-12 11:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.160621.1 | Last Updated 30 Apr 2012
Article Copyright 2012 by tanweer
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid