(function($){ $.fn.FadeBox = function(Settings){ var HasTrigger = false, TriggerType = "Click", Trigger = "", ME = $(this); if (Settings != null){ $.each(Settings, function(i, v){ if (i == "Trigger"){ HasTrigger = true; Trigger = $(v); } else if (i == "TriggerType"){ TriggerType = v; } }); } function Box(){ console.log("B"); $Object = $("
 
").prependTo("body"); $Object.css( { "width": $(window).outerWidth(), "height": $(window).outerHeight(), "background-color": "black", "position": "fixed", "opacity": 0, "top": 0, "left": 0 } ).fadeTo(700, 0.7); $Box = $("
 
").prependTo("body"); $Box.css( { "width": "500px", "height": "300px", "z-index": 10, "position": "fixed", "top": "50%", "left": "50%", "padding": "15px", "background-color": "white", "border-radius": "15px" } ); ME.clone().appendTo($Box); $Object.click(function(){ $Object.fadeOut(700, function(){ $Object.remove() }); $Box.fadeOut(700, function(){ $Box.remove() }); }); } if (HasTrigger == true){ if (TriggerType == "Click"){ Trigger.click(Box); } else if(TriggerType == "Hover"){ Trigger.mouseenter(Box); } else if(TriggerType == "DoubleClick"){ Trigger.dblclick(Box); } } else{ if (TriggerType == "Click"){ console.log("A") this.click(Box); } else if(TriggerType == "Hover"){ this.mouseenter(Box) } else if(TriggerType == "DoubleClick"){ this.dblclick(Box); } } return this; } })(jQuery); 

Usage is as follows:

//Normal, Displays on click $(selector).FadeBox(); //Uses a different event $(selector).FadeBox({ TriggerType: "Hover" }); /* Events are as follows: Hover Click DoubleClick Events are case-sensitive /* //Uses a different trigger $(selector).FadeBox({ Trigger: "selector"//Must be a string like this: "#Trigger" }); //Trigger and TriggerType can be used together.