Alert/Verify/Picture/Video/Ajax Modal Plugin – jQuery SimpleModal

A easy jQuery plugin for creating draggable alert & verify dialog bins and picture/video/AJAX modal home windows.

When designing a website, you usually wish to show completely different sorts of messages or ask the customer for particular info. With this plugin you are able to do simply that. 

You may create any sort of alert or affirmation dialog and even current your guests with a picture, a video, or an exterior web page as a modal window with out refreshing the web page. This makes it straightforward so as to add issues like publication, registration, or buy kinds.

use it:

1. To get began, add the jQuery EasyModal plugin’s information to the webpage.

<hyperlink 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...'
})
// present the modal
.showModal();

3. Create a affirmation dialog.

$.fn.SimpleModal({
  title: 'Verify Title...', 
  contents: 'Verify Message...',
  btnOk: 'Verify button',
  mannequin: 'verify',
  callback: operate(){
    alert('Motion verify!');
  },
})
// present the modal
.showModal();

4. Create a easy modal window.

$.fn.SimpleModal({
  mannequin: 'modal',
  title: 'Modal Window Title',
  contents: '<p>Any HTML Content material Right here</p>'
})
// add buttons right here
.addButton('Verify', 'btn main', operate() {
  alert('Motion verify modal');
  this.hideModal();
})
.addButton('Cancel', 'btn')
// present the modal
.showModal();

5. Load an exterior web page into the modal window by way of AJAX requests.

$.fn.SimpleModal({
  mannequin: 'modal-ajax',
  title: 'Are you certain to delete this?',
  param: {
    url: 'ajax-content.html',
    onRequestComplete: operate() { },
    onRequestFailure: operate() { }
  }
})
.addButton('Verify', 'btn main', operate() {
// verify
if( $('confirm-text').get('worth') != "DELETE" ) {
  $('confirm-delete-error').setStyle('show', 'block');
} else {
  // Your code ...
  this.hideModal();
}
})
.addButton('Cancel', 'btn')
// present the modal
.showModal();

6. Create a picture lightbox.

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

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

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

8. All default choices to customise 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 superior jQuery plugin is developed by mbuczko. For extra Superior Usages, please verify the demo web page or go to the official web site.