Examples

$.msgBox({ title:"Selam / Hello", content:"Merhaba DŁnya! / Hello World!" });
$.msgBox({ title:"Selam / Hello", content:"Merhaba DŁnya! / Hello World!", type:"info" });
$.msgBox({ title: "Are You Sure", content: "Would you like a cup of coffee?", type: "confirm", buttons: [{ value: "Yes" }, { value: "No" }, { value: "Cancel"}], success: function (result) { if (result == "Yes") { alert("One cup of coffee coming right up!"); } } });
$.msgBox({ title: "Ooops", content: "Ohh dear! You broke it!!!", type: "error", buttons: [{ value: "Ok" }], afterShow: function (result) { alert("Message has been shown!"); } });
$.msgBox({ title: "Ooops", content: "Ohh dear! You broke it!!!", type: "error", beforeClose: function () { alert("Message will be closed!"); }, showButtons:false, opacity:0.9 });
$.msgBox({ title: "Ooops", content: "Ohh dear! You broke it!!!", type: "error", showButtons: false, opacity: 0.9, autoClose:true });
$.msgBox({ type: "prompt", title: "Log In", inputs: [ { header: "User Name", type: "text", name: "userName" }, { header: "Password", type: "password", name: "password" }, { header: "Remember me", type: "checkbox", name: "rememberMe", value: "theValue" }], buttons: [ { value: "Login" }, {value:"Cancel"}], success: function (result, values) { var v = result + " has been clicked\n"; $(values).each(function (index, input) { v += input.name + " : " + input.value + (input.checked != null ? (" - checked: " + input.checked) : "") + "\n"; }); alert(v); } });

Explanations

jQuery.msgBox is a plug-in to make smarter displaying messages. Also usage of the plug-in is so easy. You just need to add following files to your page as shown below and the images named 'alert.png', 'confirm.png', 'error.png', 'info.png', 'msgBoxBackGround.png' used by plug-in to 'Images' folder in the root directory. That's all!

Source

https://github.com/dotCtor/jQuery.msgBox

Alternatives

Bootstrap 3 Modals

Options

Once you have linked/added these tree required files to your page, you can call 'jQuery.msgBox()' function with following options.
OptionConfirmable ValuesDescription
contentany stringthe message text. as default:'Message'
titleany stringthe title of the message as default:'Warning'
type'alert','confirm','error','info','prompt'type of the message will be shown. as default:'alert'
autoCloseboolean valuestrue for activating auto-closing, else false. as default:false
timeOutmillisecondsauto-close timeout. as default:content.length * 70
showButtonsboolean valuestrue for displaying buttons on message, else false. as default:true
buttonsarrayformat:[{value:"Button1"},{value:"Button2"}]. as default:[{value:"Ok"}]
successcallbacka callback function that passed the value of the button has been clicked.
beforeShowcallbacka callback before message shown.
afterShowcallbacka callback after message shown.
beforeClosecallbacka callback before message closed.
afterClosecallbacka callback after message closed.
opacitya value 1 between 0the css property of the back panel of message box. as default:0.1