I was working on an app using Adobe AIR platform. At one stage i was at a point where i needed an alert system that i can customize according to my needs. I searched for some of the plugins that were very good but accidently i bumped into a link where it talks about how to create a jQuery plugin, so i thought of creating my own which i can customize according to my needs.
I am providing the code here so that you can use this code and customize it according to your need.
//PLUGIN FOR THE NEW ALERT BOX (function($){ $.fn.extend({ customAlert: function(options) { var htmlStr = '<div id="amitOverlay"></div><div id="alertMsgDiv"><div id="aClose">[X]</div><div id="aMessage"></div></div>'; var defaults = { bgColor: '#000', opacity: '0.6', message: 'This is a test message from the plugin', }; var options = $.extend(defaults, options); $("body").append(htmlStr); $("#alertMsgDiv").css({'display': 'block', 'width': '100px'}); $("#amitOverlay").css({'display': 'block', 'top': '0px', 'left': '0px', 'width': $(this).width() + "px", 'height': $(this).height() + "px", 'background-color': options.bgColor, 'opacity': options.opacity}); $("#aMessage").html(options.message); $("#alertMsgDiv").animate({width: 300}, 300); $("#amitOverlay, #aClose").click(function(){ $("#alertMsgDiv").remove(); $("#amitOverlay").remove(); }); } }); })(jQuery); /* USAGE $(document).ready(function(){ $(document).customAlert({opacity:0.4, bgColor: "#aaa", message: 'This is a test message' }); }); */
Download the code here
Image may be NSFW.
Clik here to view.
Clik here to view.
