Draggable & Skinnable jQuery Popup Windows Plugin - Msgbox

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

More features:

• Keyboard shortcuts support.
• Supports any html contents like inline elements, ajax content, iframe, image, etc.
• Multiple message boxes on one page.
• Maximization/Minimization of the popup window.
• jQuery based transition effects: swing and linear.
• Fixed/Non-fixed message boxes.
• Lots of callbacks/APIs to customize the message boxes.
• Working as an image gallery.

Built-in themes:

• bootstrap
• black
• mac
• jqueryui
• metro
• naked
• facebook

Basic usage:

1. Include the jQuery javascript library 1.x and jQuery Msgbox plugin in the page.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.msgbox.js"></script>

2. Choose and include a theme CSS in the page.

<link href="themes/metro/css/jquery.msgbox.css" rel="stylesheet" type="text/css">

3. Create a link to trigger a message box.

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

4. Create a basic message box with default options.

$(".msgbox.basic").msgbox({
content: 'Basic Demo'
});

5. Default options.

$(".msgbox.basic").msgbox({
fixed: true, // whether the position of the box is fixed
overlay: true, // show overlay ?
overlayEvent: 'flash',
// click overlay to flash|close or function?
id: 0, // you need an ID to identify instances, only applicable for $.msgbox
open: false, // show msgbox when initialized ? By default, $(...).msgbox will not show, $.msgbox will do.
// However, you could use $.msgbox({...,open:false,...}) to force it hidden on initialization
drag: window, // whether the msgbox is draggable, true|false|jQuery Selector(drag within the element)
resize: true, // specify false to disable resize, or a scale as the minimal scale to be resized.
title: false, // the title of the msgbox
type: 'html', // the type of the content, text|ajax|html|iframe|confirm|alert|prompt|warning|info=alert|error|success|photo|image=photo|album|gallery=album
content: false, // the content
icons: [], // the icons to control the msgbox, min|max|close
buttons: [], // the buttons OK, Cancel, or custom buttons?
buttonEvents: {}, // the behavior of the buttons {'OK': function(){ alert('You clicked OK.'); }}
keyEvents: {
Esc: 'close',
Space: 'play',
Left: 'prev',
Right: 'next',
Enter: 'play'
}, // key bindings, use string to call the api or specify a function
prefix: 'jMsgbox', // the class prefix of overlay: jMsgbox-overlay, the box: jMsgbox-msgbox
width: 600, // the width of msgbox
height: 450, // the height of msgbox
initialWidth: 350, // the initial width of msgbox, when loaded, it will be animated to options.width and options.height
initialHeight: 220, // see initialHeight
top: false, // the position of msgbox, if false, will show in the middle of the window
left: false,
titleHeight: 30, // the height of the title of it is not specified in css
footHeight: 40,
transition: "swing", // the transition, only jquery-build transitions supported (swing, linear)
speed: 300, // the speed of the animation of open and close
opacity: .9, // the opacity of the overlay, you can use !important to override this in css
zIndex: 99, // the initial z-index of overlay and wrap. Just in case some other elements in document have greater z-index
lang: 'en', // the language, jquery.msgbox.i18n.js need
minPos: 'top', // or bottom, the position of the "task bar"
minWidth: 200, // the width of minimized msgbox, height is titleHeight

photoAuto: true, // whether to play the album automatically on first open
photoSpeed: 2500, // the interval of showing photos
photoScaled: false, // whether to scale the photo the scale of (options.width, options.height)
photoFade: 500, // whether to use fade transition to show photos, false, or a miniseconds

padding: 0, // the padding of the content

imgError: 'Failed to load image.', // the error message when loading image
xhrError: 'Failed to load URL.', // the error message when using ajax
// these will be overrided by $.msgboxI18N.en.imgError
//and   $.msgboxI18N.en.xhrError

// callbacks
onOpen: false,
onClose: false,
onLoad: false,
onBeforeClose: false
});

Change log:

2016-08-23

• update to the latest version

---

This awesome jQuery plugin is developed by pwwang. For more Advanced Usages, please check the demo page or visit the official website.