Awesome Dynamic jQuery Modal Window Plugin - xModal

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="//code.jquery.com/jquery-2.1.4.min.js"></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>
</div>

$('.openModal').xModal();

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

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

$('.openModal').xModal();

5. Create a dynamic modal window.

<a class="openModalDynamic" href="#">Launch</a>

$('.openModalDynamic2').xModal({ 
  headline:"Modal Title", 
  description:"Modal Body"
});

6. Create an image modal.

<a class="openModalImage" href="#">Launch</a>

$('.openModalImage').xModal({ 
  img : "1.jpg"
});

7. More configuration options.

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

// modal title
headline: "",

// modal body
description: "",

// for ajax modal
href:"",

// animation type
// reference to http://minimamente.com/example/magic_animations/
effect:"puff",

// custom html for the modal
html:""

Change log:

2016-12-17

• v1.0.0

2016-11-14

• isolated background from modal contents animation

2016-10-12

• isolated background from modal contents animation

2016-01-21

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

2016-01-20

• 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.