Lightweight Multi Purpose jQuery Modal Plugin - simplemodal

simplemodal is a lightweight, Bootstrap-compatible jQuery plugin for creating drag'n'drop, fully configurable and AJAX-enabled modal windows for your web applications.

Features:

• Drag and drop without any 3rd dependencies (like jQuery UI).
• Responsive design.
• Supports any content such as text, iframes, images and ajax content.
• Easy to style in the JavaScript.
• Tons of configuration options.
• Custom buttons with callbacks that help you create confirm / alert dialog boxes.

Basic usage:

1. Add references to jQuery library and the jQuery simplemodal plugin in your web project.

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="src/simplemodal.js"></script>

2. Include Bootstrap framework in your web project (OPTIONAL).

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

3. Create a basic modal window on your webpage.

simplemodal({
  title:'Modal Title',
  content:'This is a modal window'
})

4. Load modal content from inline elements.

<div id="modal" class="simplemodal" title="This is a title">
  Modal content
</div>

$('#modal').simplemodal();

5. Load external sources into the modal.

simplemodal({
  title:'Test',
  ajax:'ajax.html'
});

simplemodal({
  iframescroll:'no',
  title:'Test',
  iframe:'iframe.html'
});

simplemodal({
  title:'Image Modal',
  image:'img.jpg'
});

6. All default config options.

$.fn.simplemodalconfig({

  // modal title
  title           : false,

  // title color
  titlecolor      : '#666',

  // background color
  bgtitle         : '#EEE',

  // bottom botter
  titleborder     : '1px solid #CCC', 

  // modal content
  content         : false, 

  // content color
  contentcolor    : '#666',

  // background color
  bgcontent       : '#FFF', 

  // shows close button
  close           : true,

  // background color
  bgclose         : '#666', 

  // text color for close button
  closecolor      : '#EEE', 

  // border color
  closeborder     : '0px solid #CCC', 

  // executed before closing, 
  // return false if you dont want the modal closed
  onbeforeclose   : function(){return true;}, 

  // executed after the window was closed
  onclose         : function(){}, 

  // hover background color
  hoverbgclose    : '#CCC', 

  // hover text color
  hoverclosecolor : '#000', 

  // hover border
  closehoverborder: '0px solid #CCC', 

  // iframe path/url
  iframe          : false, 

  // iframe padding
  iframepadding   : 10, 

  // iframe scrolling
  iframescroll    : 'no', // scrolling

  // ajax path/url
  ajax            : false, 

  // image path/url
  image           : false, 

  // modal styles
  width           : 'auto', // width (5px, full, auto)
  height          : 'auto', // height (5px, full, auto)
  border          : '0px solid #CCC', // border
  rounded         : true, // rounded
  borderradius    : 5, // border radius
  shadow          : true, // shadow
  background      : true, // background
  draggable       : false, // draggable
  fade            : false, // fade
  escape          : false, // escape key

  // custom buttons
  buttons         :  null, // JS object

  // bottom border
  buttonsborder   : '1px solid #CCC',

  // background color
  buttonsbg       : '#EEE' 

});

---

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