Awesome Dynamic jQuery Modal Window Plugin - xModal

Awesome Dynamic jQuery Modal Window Plugin - xModal
File Size: 85.5 KB
Views Total: 2309
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

xModal is a simple-to-use jQuery modal plugin which helps you handle dynamic, static and AJAX modal popup windows with awesome CSS3 animations based on magic.css.

How to use it:

1. Include the base.css for the basic styles and CSS3 animations.

<link rel="stylesheet" href="base.css">

2. Include jQuery library and the jQuery xMoldal plugin's script jquery.xmodal.js at the bottom of the webpage.

<script src="//"></script>
<script src="jquery.xmodal.js"></script>

3. Create a static inline modal window.

<a class="openModal" href="#xModal-Inline">Launch</a>
<div id="xModal-Inline">
  <p class="center">Inline Modal Content</p>

4. Create an AJAX modal window that loads data from an external HTML file.

<a class="openModal" href="ajax.html">Launch</a>

5. Create a dynamic modal window.

<a class="openModalDynamic" href="#">Launch</a>
  headline:"Modal Title", 
  description:"Modal Body"

6. Create an image modal.

<a class="openModalImage" href="#">Launch</a>
  img : "1.jpg"

7. More configuration options.

// width of the modal
width: "75%",

// modal title
headline: "",

// modal body
description: "",

// for ajax modal

// animation type
// reference to

// custom html for the modal

Change log:


  • v1.0.0


  • isolated background from modal contents animation


  • isolated background from modal contents animation


  • Updated the way effects are applied when opening and closing modals.


  • JS and CSS update

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