Do It Live! Modals

Properties

// defaults
{
  background:['#000', 'none', 1, true],
  clone: false,
  placement:[],
  openNow:false,
  destroyOnClose:true,
  onOpened:null,
  onClosed:null
}

background:Array = [color:String, image:String, opacity:Number, closeOnClick:Boolean]
default = ['#000', 'none', 1, true]

Array describing the appearance of the modal background.

clone:Boolean
default = false

If true, the passed element will be cloned for the modal and unaffected in the DOM.

placement:Array = [top:String, left:String, margin-top:String, margin-left:String, position:String]
default = []

Array describing custom placement for the modal (values should be css, e.g. '20px' or '50%').

openNow:Boolean
default = false

If true, the modal will open immediately. (Alternatively, you could initialize then open later with the 'open' method.)

destroyOnClose:Boolean
default = true

If true, modal will be destroyed on close.

onOpened:Function
default = null

A callback that will be called when the modal is finished opening.

onClosed:Function
default = null

A callback that will be called when the modal is finished closing.

Methods

$('sel').modal(settings:Object);

Initializes a modal on the selected element with the passed settings.

$('sel').modal('open', callback:Function);

Opens a modal that has been previously initialized with an optional callback.

$('sel').modal('close', callback:Function);

Closes a modal that is currently open with an optional callback.

$('sel').modal('destroy');

Removes all modal elements for selected item from the DOM and returns non-dynamic items to thier original state.

Examples

1. Already in the DOM

$('#example-1').modal({
  background: ['#000', 'none', 0.85, true],
  openNow: true
});

Example 1

2. Dynamically Added

$('<div id="example-2"></div>').css({
  'width':'400px',
  'height':'300px',
  'background-color':'#fff'
})
.modal({
  background: ['#000', 'none', 0.85, true],
  openNow: true
});

Example 2

3. Dynamically Added With Custom Placement

$('<div id="example-3"></div>').css({
  'width':'640px',
  'height':'480px',
  'background-color':'#fff'
})
.modal({
  background: ['#000', 'none', 0.85, true],
  placement: ['20px', '50%', '0px', '-320px', 'absolute'],
  openNow: true
});

Example 3

4. Callbacks

$('#example-4').modal({
  background: ['#000', 'none', 0.85, true],
  openNow: true,
  onOpened: function() {
    alert('opened');
  },
  onClosed: function() {
    alert('closed');
  }
});

Example 4

5. Custom Background Image

$('#example-5').modal({
  background: ['', 'lib/img/example-bg.png', 1, true],
  openNow: true
});

Example 5

6. Open Later

var $m = $('#example-6').modal({
  background: ['#000', 'none', 0.85, true],
  destroyOnClose: false
});

// then later or somewhere else in code
$m.modal('open');

Example 6

7. Close

$m = $('#example-7').modal({
  background: ['#000', 'none', 0.85, true],
  openNow: true
});

// then later
$m.modal('close');

Example 7

8. Reinitialize

$('#example-8').modal({
  background: ['#000', 'none', 0.85, true],
  openNow: true
});

// then later
$('#example-8').modal({
  background: ['#f00', 'none', 0.85, true],
  placement: ['20px', '50%', '0px', '-360px', 'fixed'],
  openNow: true
});

Example 8 · Example 8 (Reinitialized)

9. Clone An Existing Element

$('#example-9').modal({
  background: ['#000', 'none', 0.85, true],
  clone: true,
  openNow: true
});

Example 9

10. Destroy

$('#example-10').modal('close', true);
$('#example-10').modal('destroy');