Customizable jQuery Modal Window Plugin - SemanticWP Modal

File Size: 31.6 KB
Views Total: 963
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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

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

  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.