Customizable jQuery Modal Window Plugin - SemanticWP Modal

Just another jQuery modal plugin helps you embed dynamic and static Html contents into a flexible, customizable and themeable modal popup windows.

Features:

• Supports remote data source via Ajax request, with an AJAX loading indicator.
• Supports long content with browser scrollbar enabled.
• Custom fullcreen overlay.
• Custom open / close animations.
• Custom modal templates.
• Press the ESC or click on the overlay to close the modal.
• Callback functions.
• 2 built-in themes: dark and light. 
• Can be used to toggle the visible of your block content

How to use it:

1. Load jQuery library and the jQuery SemanticWP Modal plugin's files in the document.

<!-- jQuery -->
<script src="jquery-1.11.3.min.js"></script>

<!-- jQuery SemanticWP Modal -->
<script src="path/to/jquery.semanticwp-modal.js"></script>
<link rel="stylesheet" href="path/to/jquery.semanticwp-modal.css">

2. Load a theme CSS of your choice into the document.

<link rel="stylesheet" href="path/to/light.css">
<!-- OR -->
<link rel="stylesheet" href="path/to/dark.css">

3. Create a basic modal window triggered by an inline element.

<span id="#example1" onclick="$('#exampleModal1').swpmodal()">Basic Demo</span>
<div class="g-hidden">
  <div class="box-modal" id="exampleModal1">
    <div class="box-modal_close swpmodal-close">&times;</div>
    Modal Content Goes Here
  </div>
</div>

4. Load an external data source into the modal window using AJAX.

$.swpmodal({
  type: 'ajax',
  url: 'ajax_example.html'
});

5. Full plugin options.

// ajax or html
type: 'html',

// modal content
content: '',

// AJAX options
url: '',
ajax: {},
ajax_request: null,

// ESC key to close
closeOnEsc: true,

// Click on the overlay to close
closeOnOverlayClick: true,

clone: false,

// custom overlay
overlay: {
  block: undefined,
  tpl: '<div class="swpmodal-overlay"></div>',
  css: {
    backgroundColor: '#000',
    opacity: .6
  }
},

// custom modal container
container: {
  block: undefined,
  tpl: '<div class="swpmodal-container"><table class="swpmodal-container_i"><tr><td class="swpmodal-container_i2"></td></tr></table></div>'
},

wrap: undefined,
body: undefined,

// custom error modal
errors: {
  tpl: '<div class="swpmodal-error swpmodal-close"></div>',
  autoclose_delay: 2000,
  ajax_unsuccessful_load: 'Error'
},

// custom open / close animations.
openEffect: {
  type: 'fade', // fade or none
  speed: 400 // animation speed
},

closeEffect: {
  type: 'fade',
  speed: 400
},

// callbacks
beforeOpen: $.noop,
afterOpen: $.noop,
beforeClose: $.noop,
afterClose: $.noop,
afterLoading: $.noop,
afterLoadingOnShow: $.noop,
errorLoading: $.noop

Change log:

v1.0.1 (2015-05-22)

• fixed for z-index

---

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