Modal.js

Modal options

Confirm modal options (default settings)

Modal.confirm({
  title: 'Notification',    // modal title
  message: '',              // modal message
  autoOpen: true,           // show modal when declared
  closeOnEscape: true,      // close when escape key pressed
  closeOnBlur: true,        // close when overlay is clicked
  animated: true,           // animate modal
  buttonClass: '',          // confirm button class
  buttonLbl: 'OK',          // confirm button label
  cancelLbl: 'Cancel'       // cancel button label
  onConfirm: function() {}, // callback if the user confirms
  onCancel: function() {},  // callback if the modal is closed without the 
  onClose: function() {},   // callback on modal close, called allways after confirm or cancel
});

Alert modal options (default settings)

Modal.alert({
  title: 'Notification',  // modal title
  message: '',            // modal message
  autoOpen: true,         // show modal when declared
  closeOnEscape: true,    // close when escape key pressed
  closeOnBlur: true,      // close when overlay is clicked
  animated: true,         // animate modal
  buttonLbl: 'OK',        // alert button label
  onClose: function() {}, // callback on modal close
});

Helper Methods

.open()   // opens the modal
.close()  // closes the modal

Example 1

Modal.confirm({
  title: 'Change something',
  message: 'Are you sure you want to change?'
});

Example 2

Modal.alert('Hello!');

Example 3

Confirm Modal with callbacks

Modal.confirm({
  title: 'Confirm callbacks',
  message: 'Will you eat your cake?',
  onConfirm: function() {
    alert('I will!');
  },
  onCancel: function() {
    alert('Nope!');
  },
  onClose: function() {
    alert('Finally close is called!');
  }
});

The callbacks can be set inline as well (same result as above)

Modal.confirm({
  title: 'Confirm callbacks',
  message: 'Will you eat your cake?'
}, function() {
  alert('I will!');
}, function() {
  alert('Nope!');
}, function() {
  alert('Finally close is called!');
});

Example 4

Confirm button preset colors (red, green)

Modal.confirm({
  title: 'Confirm button color',
  message: 'Is the cake sweet?',
  buttonClass: 'green',
  buttonLbl: 'Yes'
});

Delete Image Example

Easily add custom interfaces to the Modal object for a faster development

Modal.deleteImage = function(imageName) {
  arguments[0] = {
    title: 'Delete Image',
    message: 'Are you sure you want to delete <strong>' + imageName + '</strong>?',
    buttonClass: 'red',
    buttonLbl: 'Delete file'
  };
  return Modal.confirm.apply(this, arguments);
};

The effort to call the modal is reduced significantly as seen bellow:

Modal.deleteImage('iPhone5S.jpg', function() {
  alert('Delete image!');
});