MD: A Modal Dialog jQuery Plugin

Latest release: 1.7 (July 3, 2011)

MD is a customizable jQuery plugin for modal dialog boxes. Flexible and versatile, it is able to handle many notification requirements easily. MD was originally built off of Michael Leigeber’s Modal Dialog, but has since grown into something more robust.

If you need help or have feature requests, feel free to post in our forum.

Examples
Download the latest version

Setup

<script type=”text/javascript” language=”JavaScript” src=”js/jquery.md.js”> </script>

Usage

$.md(‘text’,{options});
or
$.md(‘text’);

Methods

.hide()
Closes the dialog window and hides all associated HTML

.setPosition(position)
Sets the location of the dialog box within the window. Set by ‘x y’ with either center, left, right, or any pixel or percentage value

.minimize()
Slides the content window up into the header

.restore()
Slides the content window back down

.toggleMinimize()
Toggles between minimize and restore

.fullscreen()
Sets dialog box to full window width

.removeFullscreen()
Reverts dialog box back to non-fullscreen dimensions

.toggleFullscreen()
Toggles between fullscreen and removeFullscreen

Properties

showClose
When set to false, hide close button

Default: true
Type: Boolean

showMinimize
When set to false, hide minimize button

Default: true
Type: Boolean

showFullscreen
When set to false, hide close button

Default: true
Type: Boolean

fullscreen
When set to true, dialog box opens in fullscreen

Default: false
Type: String

type
sets the type of dialog box to show. can be set to ‘err’, ‘success’, ‘warning’, or ‘prompt’

Default: “Error”
Type: String

buttons
the object to set the buttons and their functions to be used with the dialog box
formatted as {“button name” : function(){}}

Default: { }
Type: Object

timeout
sets the auto-close time limit in seconds for the dialog box. 0 shuts this property off

Default: 0
Type: Integer

width
sets the width of the dialog box

Default: 525
Type: Integer

cssDir
sets the directory to pull the css files from. This is only done on the first call and is not subsequently overwritten.

Default: “css”
Type: String

position
sets the initial location for the dialog box

Default: “center”
Type: String

modal
should the dialog box be modal?

Default: true
Type: Boolean

modalBG
Sets the modal dialog box background color

Default: “#ffffff”
Type: String

Changelog

1.7

  • fixed IE bug: fixed positioning
  • fixed bug: styles now load inline to avoid style loading issues
  • images in CSS file are now relative to the page calling the script
  • removed buttons hidden on showClose being true
  • created new icons for header buttons
  • created local variables for frequently accessed elements to speed things up
  • added fullscreen methods
  • added minimize methods
  • added fullscreen properties
  • added minimize properties

1.3

  • fixed IE bug: modal background not showing up
  • organized methods for easier reference and access
  • added setPosition method
  • added modalBG property

1.2

  • added modal property
  • added position property

1.0

  • Initial release!