Alert/Confirm/Image/Video/Ajax Modal Plugin - jQuery SimpleModal

A simple jQuery plugin for creating draggable alert & confirm dialog boxes and image/video/AJAX modal windows.

When designing a site, you often want to display different kinds of messages or ask the visitor for specific information. With this plugin you can do just that. 

You can create any kind of alert or confirmation dialog or even present your visitors with an image, a video, or an external page as a modal window without refreshing the page. This makes it easy to add things like newsletter, registration, or purchase forms.

How to use it:

1. To get started, add the jQuery SimpleModal plugin's files to the webpage.

<link rel="stylesheet" href="/path/to/simplemodal.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/simple-modal.js"></script>

2. Create an alert dialog.

$.fn.SimpleModal({
  title: 'Alert Title...', 
  contents: 'Alert Message...'
})
// show the modal
.showModal();

3. Create a confirmation dialog.

$.fn.SimpleModal({
  title: 'Confirm Title...', 
  contents: 'Confirm Message...',
  btnOk: 'Confirm button',
  model: 'confirm',
  callback: function(){
    alert('Action confirm!');
  },
})
// show the modal
.showModal();

4. Create a simple modal window.

$.fn.SimpleModal({
  model: 'modal',
  title: 'Modal Window Title',
  contents: '<p>Any HTML Content Here</p>'
})
// add buttons here
.addButton('Confirm', 'btn primary', function() {
  alert('Action confirm modal');
  this.hideModal();
})
.addButton('Cancel', 'btn')
// show the modal
.showModal();

5. Load an external page into the modal window via AJAX requests.

$.fn.SimpleModal({
  model: 'modal-ajax',
  title: 'Are you sure to delete this?',
  param: {
    url: 'ajax-content.html',
    onRequestComplete: function() { },
    onRequestFailure: function() { }
  }
})
.addButton('Confirm', 'btn primary', function() {
// check
if( $('confirm-text').get('value') != "DELETE" ) {
  $('confirm-delete-error').setStyle('display', 'block');
} else {
  // Your code ...
  this.hideModal();
}
})
.addButton('Cancel', 'btn')
// show the modal
.showModal();

6. Create an image lightbox.

$.fn.SimpleModal({
  model: 'modal-ajax',
  title: 'Modal Lightbox',
  param: {
    url: '1.jpg'
  }
})
// show the modal
.showModal();

7. Emebed a video (like Youtube & Vimeo) into the modal window.

$.fn.SimpleModal({
  hideFooter: true,
  title: 'Vimeo video',
  model: 'modal',
  contents: '<iframe src="http://player.vimeo.com/video/747666103?title=0&amp;byline=0&amp;portrait=0&amp;color=824571" width="680" height="382" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>'
}).
// show the modal
.showModal();

8. All default options to customize the modal.

$.fn.SimpleModal({
  onAppend: null,
  offsetTop: null,
  overlayOpacity: .3,
  overlayColor: '#000000',
  width: 400,
  draggable: true,
  keyEsc: true,
  closeButton: true,
  hideHeader: false,
  hideFooter: false,
  animate: true,
  btnOk: 'OK',
  btnCancel: 'Cancel',
  template: '<div class=\"simple-modal-header\"> \
      <h1>{_TITLE_}</h1> \
    </div> \
    <div class=\"simple-modal-body\"> \
      <div class=\"contents\">{_CONTENTS_}</div> \
    </div> \
    <div class=\"simple-modal-footer\"></div>'
}).

---

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