jQuery msgbox

Download   Demo

Msgbox is an versatile jQuery popup plugin for creating modals, dialogs, message boxes that are draggable, themable, resizable and fully customizable.

Why another jquery popup plugin ?

Most of the exising jquery popup plugins are lacking some of the features:

• Multiple instances support


• Resize handler to resize the popup box


• Maximization/Minimization of the popup box


• Dragging support


• Theme customization


• Key bindings support


• Working as a photo slideshow


• Fourth party library indenpendent (some may dependent on jQuery UI, etc)

If you are looking for a plugin with most of the above features, here it is

Features

(c) could be customized

• Key bindings (c)


• Overlay events (c)


• Draggable


• Resizable


• Icons, (prev,play,next,min,max,close) (c)


• Buttons in footer, and their events could be fully customized (c)


• Working as a photo viewer


• Themes (c)


• Multiple instances (task tar simulation)


• Internationalization (c)


• API

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="../themes/metro/css/jquery.msgbox.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="../jquery.msgbox.i18n.js"></script>
<script type="text/javascript" src="../jquery.msgbox.js"></script>

2. HTML

<a href="javascript:;" class="msgbox basic">Open basic msgbox</a>

3. JAVASCRIPT

$(".msgbox.basic").msgbox(
	content: 'Hello world',
	padding: 12
);

4. OPTIONS

jquery.msgbox could be either initialized by $.msgbox(arguments) or $(SELECTOR).msgbox(arguments)

The arguments is an javascript object with key-value pairs (e.g. title: ‘Hello’, content: ‘Hello world!’):

NOTICE: Although no arguments is required, to initialize a msgbox, an object, even an empty object (), is needed.

Because we use $.msgbox() and $(SELECTOR).msgbox() to retrieve the object.

 

Key	Value type	Default value	Description
fixed	boolean	true	Whether the position of the box is fixed
overlay	boolean	true	Whether to show the overlay or not
overlayEvent	string|function	‘flash’	The event when clicking the overlay	If a string is given, the API will be called; otherwise, the function will be fired.
id	string|number	0	The identity of the instance, used for multiple instances	Multiple instances are only available by using $.msgbox(…)with a unique id
open	boolean	$(SELECTOR).msgbox: false $.msgbox: true	Whether to open the msgbox after initialized.	When using $(SELECTOR).msgbox, the msgbox will not be opened until the trigger is clicked or the .open() API is called. When using $.msgbox, it will be opened by default.
drag	boolean|jquery selector	window	Whether to enable the dragging of msgobx.	If a jquery selector is given, the msgbox will be allowed only dragged in the element.
resize	boolean|object	true	Whether to enable the resizing of msgobx.	If true is given, it will use width: minWidth, height: titleHeight as default. It defines the minimal scale of msgbox can be resized.
title	boolean|string	false	The title of msgbox	If false is given, it will be replace by the attribute “title” of the trigger when in photo/image/gallery/album mode.
type	string	‘html’	The type of msgbox	Supported types: text, ajax, html, iframe, confirm, alert, prompt, warning, info, error, success, photo, image=photo, album, gallery=album
content	boolean|string	false	The content of msgbox	If false is given, the content will be replaced by jquery.msgbox version information. Different types have different contents. For text, html, confirm, alert, prompt, warning, info, error, success, the content is the content which will be display in the box. For ajax, iframe, the content is the url to be loaded. Forphoto, image, album, gallery, the content is the jquery selector of the triggers, which are usually links like <a href=”photo.jpg” class=”photo” title=”A photo”>click to show photo</a>.
icons	array	type=confirm, alert, prompt, warning, info, error, success, photo, image: ['close'] type=album, gallery: ['prev', 'play', 'next', 'min', 'max', 'close'] type=other: ['max', 'close']	The icons of msgbox	Supported icons: prev, play, next, min, max, close
buttons	array	type=confirm, alert, prompt, warning, info, error, success, photo, image: ['OK'] type=confirm, prompt: ['OK', 'Cancel'] type=other: []	The buttons in the footer	This could be fully customized. The events could be specify by buttonEvents
buttonEvents	object		The events bond to the buttons	The key should exist in buttons, ‘OK’, ‘Cancel’ will override the default actions of the two buttons. When specify a function, this will refer to the msgbox itself. If a string specified to a key, the API will be called. E.g. ‘OK’:’close’ means when click OK button, it will call API close()
keyEvents	object	Esc: ‘close’, Space: ‘play’, Left: ‘prev’, Right: ‘next’, Enter: ‘play’	The key events.	Only takes effects on the focusing msgbox. The meaning of the value is the same as buttonEvents
prefix	string	jMsgbox	The class prefix or the jquery events binding namespace.	E.g. the class of overlay: jMsgbox-overlay (see css file). The event bond to overlay: ‘click.jMsgbox’
width	number	600	The width of msgbox
height	number	450	The height of msgbox
initialWidth	number	350	The initial width of msgbox	See initialHeight
initialHeight	number	220	The initial height of msgbox	1. the initial dimension to be zoomed in/out to width, height 2.If width and height are not given, or exactly the same as the default width and height, they will be specified as initialWidth and initialHeight , respectively, when the type is one of alert, info, prompt, confirm, success, warning, error.
top	boolean|number	false	The initial top position of the msgbox	If false, it will be placed in the middle of the window
left	boolean|number	false	The inital left position of the msgbox	If false, it will be placed in the center of the window
titleHeight	number	40	The height of the title wrapper	If the height of .jMsgbox-title is not indicated in css, this value will be used. If you want to override it in css, please use !important
footHeight	number	30	The height of the footer	Similar as titleHeight, the class name is .jMsgbox-foot
transition	string	swing	The transition when opening or closing msgbox	Only jquery built-in transition supported: swing, linear
speed	number	300	The speed of the opening or closing animation
opacity	number	0.9	The opacity of the overlay	Of course you can use css, but this is an easy way to make it supported by cross-browsers
zIndex	number	99	The z-index of overlay and the box wrapper	Use it just in case of some elements with greater z-index in the page (, if you want to cover them with msgbox).
lang	string	en	The language of the msgbox	See Internationalization
minPos	string	top	The position of the “task bar”	When create multiple instances, you are able to minimize all of them to simulate a task bar.
minWidth	number	200	The minimal width of msgbox	1. the width of msgbox when minimized 2. the minimal width when resize msgbox
padding	number	0	The padding of the content	Sometimes you need a padding of the content, e.g.: for text type or html type. However, you don’t need them for photos in most cases. CSS cannot differentiate the types, so you can define them here. Remember to use !important to override if you’d like to define it in CSS.
photoAuto	boolean	true	Whether to start playing the gallery when open it
photoSpeed	number	2500	The interval of showing a photo in gallery
photoScaled	boolean	false	Whether to scale the photo to width, height. If not, it will show its original dimension.
photoFade	boolean	true	Whether to use fadeIn to show the photo after loaded
imgError	string	‘Failed to load image.’	The error message when failed to load image.	This could be override by $.msgboxI18N.en.imgError
xhrError	string	Failed to load URL.	The error message when failed to load an ajax URL.	This could be override by $.msgboxI18N.en.xhrError
onOpen	function		The callback when msgbox is opened
onClose	function		The callback when msgbox is closed
onLoad	function		The callback when the content is loaded
onBeforeClose	function		The callback just before the close triggers. The close will be cancelled when it returns false.

5. API

As in Full Settings mentioned, we use $.msgbox() and $(SELECTOR).msgbox() to retrieve the msgbox. We can also use $.msgbox(id) to retrieve a msgbox when deal with multiple instances. Once got the object, we can call the API in this wah: $.msgbox().close() or $(SELECTOR).msgbox().close()

In all the callbacks, this will refer to the msgbox object.

NOTICE: When initialize a msgbox: $(SELECTOR).msgbox(…), it will return a jQuery object to keep chaining, instead of a msgbox object.

API	Arguments	Description
enableDrag		To enable dragging
disableDrag		To disable dragging
enableResize		To enable resizing
disableResize		To disable resizing
flash	opacity(number): the opacity to change, interval(number): the interval between each opacity change callback(function): the callback	To flash the title by changing the opacity 2 times (simulation of windows)
play	callback(function): the callback	To play the gallery. If the gallery is already playing, it will pause.
next	callback(function): the callback	To show the next photo in the gallery.
prev	callback(function): the callback	To show the previous photo in the gallery
pause		To pause the gallery playing
open	callback(function): the callback	To open the msgbox
val		To return the value of msgbox. The value is set in prompt or confirm
close	callback(function): the callback	To close the msgbox
remove		To remove the msgbox. (click the trigger, msgbox will no show any more and new msgbox will not be generated either.)
title	t(string): the new title	To return the title (if t is not specified), or to set a new title.
reload	callback(function): the callback	To reload the content of the msgbox
focus	callback(function): the callback	If msgbox is minimized, restore it; if it is closed, open it; if it is opened, flash the title.
restore	callback(function): the callback	To restore the msgbox from minimized or maximized.
min	callback(function): the callback	To minimize the msgbox. If it is already minimized, restore it.
max	callback(function): the callback	To maximize the msgbox. If it is already minimized, restore it.
content	c(string): the new content	To get the content(html) (if c is not specified), or to set the new content(html).

Static

API	Arguments	Description
$.msgbox.defaults	options(object)=	Change the default settings
$.msgbox.closeAll	callback(function)	Close all the msgboxes generated by $.msgbox. Callback will be called after all msgboxes closed.
$.msgbox.restoreAll	callback(function)	Restore all the msgboxes generated by $.msgbox. Callback will be called after all msgboxes restored from minimized or maximized.
$.msgbox.minAll	callback(function)	Minimize all the msgboxes generated by $.msgbox. Callback will be called after all msgboxes minimized.

6. INTERNATIONALIZATION

Refer the file jquery.msgbox.i18n.js and specify a language lang to use i18n.

Key	Description
OK	The value of the ‘OK’ button
Cancel	The value of the ‘Cancel’ button
Loading	The message when an iframe is loading
Play/Pause	The title of the ‘play’ icon
Next	The title of the ‘next’ icon
Prev	The title of the ‘prev’ icon
Minimize	The title of the ‘min’ icon
Maximize	The title of the ‘max’ icon
Close	The title of the ‘close’ icon
xhrError	The error message when failed to load the ajax URL.
imgError	The error message when failed to load the image.

7. EXAMPLES

text: Open msgbox

$(".jmb-text").msgbox(
	type: 'text',
	content: 'Text content'
);

html (default): Open msgbox

$(".jmb-html").msgbox(
	type: 'html',
	content: '<p>HTML content</p><p style="color: #f33;">HTML content</p>'
);

ajax: Open msgbox

$(".jmb-ajax").msgbox(
	type: 'ajax',
	content: 'index.html'
);

iframe: Open msgbox

$(".jmb-iframe").msgbox(
	type: 'iframe',
	content: 'index.html'
);

confirm: Open msgbox

$(".jmb-confirm").msgbox(
	type: 'confirm',
	content: 'Are you sure',
	onClose: function()
		alert(!!this.val());
	
);

alert: Open msgbox

$(".jmb-alert").msgbox(
	type: 'alert',
	content: 'Message',
	title: 'Alert'
);

prompt: Open msgbox

$(".jmb-prompt").msgbox(
	type: 'prompt',
	content: 'Please input: ',
	onClose: function()
		alert(this.val());
	
);

photo: Open msgbox Open msgbox by $.msgbox

//<a href="https://www.google.com.hk/images/srpr/logo11w.png" title="Google Logo" class="jmb-photo">Open msgbox</a>
$(".jmb-photo").msgbox(
	type: 'photo'
);
$(".jmg-photo-opener").click(function()
	$.msgbox(
		type: 'photo',
		content: '.jmb-photo'
	);
);

gallery: Open msgbox (1st photo) Open msgbox (2nd photo) Open msgbox (3rd photo) Open msgbox by $.msgbox

$(".jmb-gallery").msgbox(
	type: 'gallery'
);
$(".jmg-gallery-opener").click(function()
	$.msgbox(
		type: 'gallery',
		content: '.jmb-gallery'
	);
);

jQuery msgbox