jQuery Msgbox Plugin Examples

Switch msgbox theme:

Initialization

Basic usage

No arguments is required for jquery.msgbox, however, you have to pass an ampty object {} to either $.msgbox or $(...).msgbox. Because $.msgbox() and $(...).msgbox() are used to retrieve msgbox objects
$(".msgbox.defaultmsg").msgbox({});
$(".msgbox.basic").msgbox({
	content: 'jqueryscript.net',
	padding: 12
});
Open basic msgbox Open default msgbox

Alert/Info/Warning/Error/Success

These are shortcuts. You can add different style width selector .jMsgbox-alert .jMsgbox-loaded
To replace window.alert width jquery.msgbox alert shortcut:
var _alert = window.alert;
window.alert = function (msg) {
	$.msgbox({type:'alert', content: msg});
};
window.alert('Something');
// recover original alert
window.alert = _alert;
$(".msgbox.alert").msgbox({
	type: 'alert',
	content: 'This is an alert!',
	title: 'Alert'
});
$(".msgbox.info").msgbox({
	type: 'info',
	content: 'This is an info!',
	title: 'Info'
});
$(".msgbox.warning").msgbox({
	type: 'warning',
	content: 'This is a warning!',
	title: 'Warning'
});
$(".msgbox.error").msgbox({
	type: 'error',
	content: 'This is an error!',
	title: 'Error'
});
$(".msgbox.success").msgbox({
	type: 'success',
	content: 'This is a success!',
	title: 'Success'
});
Open alert msgbox Open info msgbox Open warning msgbox Open error msgbox Open success msgbox

Confirm

$(".msgbox.confirm").msgbox({
	type: 'confirm',
	content: 'This is a confirm ?',
	title: 'Confirm',
	onClose: function(){
		alert('You clicked: ' + (this.val() ? 'OK' : 'Cancel'));
	}
});
Open msgbox

Prompt

$(".msgbox.prompt").msgbox({
	type: 'prompt',
	content: 'Please input: ',
	title: 'Input a value',
	onClose: function(){
		if (this.val() === undefined) alert('You cancelled');
		else alert('You entered: ' + this.val());
	}
});
Open msgbox

Photo/Album

$(".msgbox.photo").msgbox({
	type: 'photo',
	photoScaled: true
});
$(".msgbox.album").msgbox({
	type: 'album'
});
Open single photo Open photo 1 (album) Open photo 2 (album) Open photo 3 (album) Open photo 4 (album)

Ajax

If you run this file as a local file, nothing will be loaded. You need a server to use this function.
$(".msgbox.ajax").msgbox({
	type: 'ajax',
	title: 'Ajax'
});
Open msgbox

Iframe

$(".msgbox.iframe").msgbox({
	type: 'iframe'
});
Open msgbox

Fixed/Non-fixed msgbox

$(".msgbox.fixed").msgbox({
	content: 'Fixed msgbox',
	fixed: true
});
$(".msgbox.nonfixed").msgbox({
	content: 'Non-fixed msgbox',
	fixed: false
});
Open fixed msgbox Open non-fixed msgbox

Change default settings

Change the default settings:
Change the overlay click event to 'close' (default: 'flash')
Resize button (bottom right) not available any more
Change langauge to Simplifed Chinese
$.msgbox.defaults({
	overlayEvent: 'close',
	resize: false,
	lang: 'zh_CN'
});
$(".msgbox.default").msgbox({type:'alert'})
Open msgbox

Multiple instances

Multiple instances could be generated by $.msgbox; they could be minimized to the top or bottom of the window (emulating the task bar). The msgbox generated by $(...).msgbox will be arraged to the task bar.
$(".msgbox.multi").click(function(){
	var id = parseInt(5*Math.random());
	$.msgbox({
		type: 'alert',
		title: 'msgbox: ' + id,
		content: 'hello' + id,
		overlay: false,
		icons: ['min', 'max', 'close'],
		id: id 
	});
});
$(".msgbox.close0").click(function(){
	var msgbox = $.msgbox(0)
	if (msgbox) msgbox.close();
});
$(".msgbox.restore0").click(function(){
	var msgbox = $.msgbox(0)
	if (msgbox) msgbox.restore();	
});
$(".msgbox.min0").click(function(){
	var msgbox = $.msgbox(0)
	if (msgbox) msgbox.min();
});
$(".msgbox.closeall").click(function(){
	$.msgbox.closeAll();
});
$(".msgbox.restoreall").click(function(){
	$.msgbox.restoreAll();	
});
$(".msgbox.minall").click(function(){
	$.msgbox.minAll();	
});
$(".msgbox.fn").msgbox({
	type: 'alert',
	overlay: false,
	icons: ['min', 'max', 'close'],
	content: 'This will not be minimized to the task bar.'
});
Open msgbox Close msgbox: 0 Restore msgbox: 0 Minimize msgbox: 0 Close all msgboxes Restore all msgboxes Minimize all msgboxes Msgbox by $.fn.msgbox

Custom buttons

The custom buttons will have class name 'jMsgbox-button-N', where N is the index of the custom button, starting from 1
$(".msgbox.cbuttons").msgbox({
	buttons: ['Custom Button 1', 'Custom Button 2'],
	buttonEvents: {
		'Custom Button 1': function() {
			this.content('Custom Button 1');
		},
		'Custom Button 2': function() {
			this.animate({width: 350, height: 160});
		}
	}
});
Open msgbox

Callbacks

Callbacks

$(".msgbox.transitions").msgbox({
	onOpen : function () { this.content('Opened');},
	onLoad : function () { alert('Loaded'); },
	onBeforeClose: function () { return confirm('Are you sure?'); },
	onClose: function () {alert('closed');}
});
Open msgbox

APIs

APIs

$(".msgbox.api").msgbox({
	type: 'text',
	content: 'hello',
	overlay: false,
	resize: true
});
$(".msgbox.api-animate").click(function(){
	$(".msgbox.api").msgbox().animate({
		width: 400,
		height: 200
	});
});
$(".msgbox.api-close").click(function(){
	$(".msgbox.api").msgbox().close();
});
$(".msgbox.api-open").click(function(){
	$(".msgbox.api").msgbox().open();
});
$(".msgbox.api-title").click(function(){
	$(".msgbox.api").msgbox().title('A new title');
});
$(".msgbox.api-content").click(function(){
	$(".msgbox.api").msgbox().content('whatever');
});
$(".msgbox.api-focus").click(function(){
	$(".msgbox.api").msgbox().focus();
});
$(".msgbox.api-min").click(function(){
	$(".msgbox.api").msgbox().min();
});
$(".msgbox.api-max").click(function(){
	$(".msgbox.api").msgbox().max();
});
$(".msgbox.api-restore").click(function(){
	$(".msgbox.api").msgbox().restore();
});
$(".msgbox.api-remove").click(function(){
	$(".msgbox.api").msgbox().remove();
});

Open msgbox Msgbox animation Close msgbox Open msgbox (API) Change msgbox title Change msgbox content Get focus Minimize msgbox Restore msgbox Maximize msgbox Remove msgbox