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,
$("#divid").popup();
Sample code given below,
This is an very nice popup
$("#sample_popup").popup();Your Answers
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. |