Questions

Simple JQuery Message Popup window

popup function in jquery

Its very simple popup function in jquery, also write inbuild stlye used in the function, so you can easily modified the function as you like you want.

Step 1:- Jquery popup function
(function($){
  $.fn.popup = function() {
     var css='position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index:100;opacity: 0.7;filter:Alpha(Opacity=30);background:black;';
    $('<div class ="yos_popup_overlay" style="'+css+'" ></div>').appendTo(document.body).css({ height: $(document).height() }).fadeIn(500); ;
       
    var top = (($(window).height() - $(this).outerHeight()) / 2 )  + $(window).scrollTop() ;
    var left = (($(window).width() - $(this).outerWidth()) / 2 )  + $(window).scrollLeft() ;
    css='border:1px solid #fff; border-radius:10px; background:#dddddd; height:230px; width:500px; text-align:center; font-size:14px; z-index:2000';
    var msg = $("<DIV class ='yos_popup' style='"+css+"'></DIV>");
    css ="float:right;margin-right:10px; margin-top:10px;color:#000";
    msg.html("<a style='"+css+"'class ='close' href='javascript:closePopup()'></a>
"+this.html());
    msg.appendTo(document.body).css({padding :'0px',display : 'none', position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'}).fadeIn(600);
  };
})( jQuery );
function closePopup(){
    $(".yos_popup").fadeOut(500,function(){ $(".yos_popup").remove(); $(".yos_popup_overlay").remove();    } );
   
}


Step 2 :- how to use the popup ?

 you can use the method,
 $("#divid").popup();

Sample code given below,
This is an very nice popup

$("#sample_popup").popup();

Your Answers

Your Name:
Your Answers :
<> is a code tag
Preview
Enter the verification code:

Answers

ddd
Apr 18 13 07:50:03
ddddd

jj
Apr 17 13 02:05:23
great :)

Ajay
Jan 25 12 12:58:07
great work.. 

Maria Mercy
Dec 31 11 09:07:29
great works, easy to create a new customized popup.