$(document).ready(function() { alert("See JavaScript for customization options."); (function($) { $.fn.msgbox = function(title, message, icon, button, iconFunc, btnFunc) { $title = title; $msg = message; $btn = button; $msgbtn = $("

").attr("class", "message-button").text($btn).click(btnFunc); $msgcnt = $("

").attr("class", "message-content").text($msg); $msgttl = $("

").attr("class", "message-title").text($title); $msgimg = $("

").attr("class", "message-img").click(iconFunc); $msgsdw = $("

").attr("class", "message-img-shadow"); $msgbox = $("

").attr("class", "message-box"); $msgbox.append($msgsdw); $msgbox.append($msgimg); $msgbox.append($msgttl); $msgbox.append($msgcnt); $msgbox.append($msgbtn); if (icon === "warning") { $icon = $("").attr("class", "fa fa-warning"); $msgimg.append($icon); } else if (icon === "info") { $icon = $("").attr("class", "fa fa-info-circle"); $msgimg.append($icon); } else if (icon === "success") { $icon = $("").attr("class", "fa fa-check-circle"); $msgimg.append($icon); } else if (icon === "error") { $icon = $("").attr("class", "fa fa-ban"); $msgimg.append($icon); } else if (icon === "notification") { $icon = $("").attr("class", "fa fa-bell"); $msgimg.append($icon); } else if (icon === "message") { $icon = $("").attr("class", "fa fa-envelope"); $msgimg.append($icon); } $("body").append($msgbox); $(document).mouseup(function(e) { var container = $msgbox; if (!container.is(e.target) && container.has(e.target).length === 0) { container.hide(); } }); return this; }; }(jQuery)); /* customize the message box here */ $().msgbox("John Doe", /* title */ "John Doe messaged you.", /* message */ "message", /* icon name, can be "info", "success", "error", "warning", "notification", "message" */ "View Message", /* button text */ function() { /* code executed when the icon/image is clicked */ alert("image"); }, function() { /* code executed when the button is clicked */ alert("button"); } ); });

Custom Message Box