jQuery Alert Message Box | Lessoncup Programming Blog

Monday, 10 March 2014

jQuery Alert Message Box

Hi, today i am going to tell you about how to develop a simple message alert box using jQuery, the alert box's are use to display a text messages or you can use also to banner ads and you can place it anywhere in the webpage, let's see how to do a alert message box using jquery


HTML

in html take a div and give it ID name like box and class name like message inside the div place a close button to close the alert box and keep some text or banner image as you like
<div id="box" class="message"> 

  <img id="closeBtn" style="float:right;cursor:pointer"  src="12-em-cross.png" />

    <strong>Lessoncup</strong>

  <p>it is a arena to learn web technologies like jQuery, Ajax, CSS, php, Mysql, JavaScript from basic level to advanced level. visit me @ <a href="http://www.lessoncup.com">www.lessoncup.com</a></p>

</div>


JAVASCRIPT

here animate the box div from top position with 400 speed using animate() method and make some flashing effect to box using fadeOut() and fadeIn() methods. write the click function on close button to hide the alert box
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 $('#box').animate({
  
  top:"200px"
  
 },400).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
 
 
 $('#closeBtn').click(function(){
  
  $('#box').fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut("slow");
  
 });
 
});

</script>

CSS

write the style to message box and arrange it in proper area as you like to display the alert box
<style>

.message{
    border:1px solid #CCCCCC;
 position:absolute;
 width:400px;
 border:1px solid #c93;
 background:#ffc;
 padding:5px;
 left:450px;
 font-size:18px;
 top : -450px;

}
</style>


Live Demo   Download Script

No comments :

Post a Comment

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons