Basic AJAX Modal Window Plugin - jq.modal.js

A responsive, AJAX modal jQuery plugin that enables a trigger link to toggle a minimal clean modal window fetching content from an external file via AJAX requests.

How to use it:

1. Insert the stylesheet jq.modal.css and JavaScript jq.modal.js into the document which has jQuery installed.

<link href="jq.modal.css" rel="stylesheet" />
<script src="/path/to/jquery.min.js"></script>
<script src="jq.modal.js"></script>

2. Insert modal content into an HTML file (e.g. ajax.html).

<!-- AJAX.HTML -->
<h2>AJAX Modal Title</h2>
<p>jQueryScript.Net Demo Page</p>
<img src="https://source.unsplash.com/GBaoK4Dx5QM/400x200">

3. Pre-render the AJAX file for better performance. Optional but recommended.

<link rel="prerender" href="ajax.html">

4. Add the rel="modal:open" attribute to the trigger link pointing to the AJAX file. That's it.

<a href="ajax.html" rel="modal:open">Open Modal</a>

5. Feel free to override the default styles of the modal window.

.jqmodal {
  display: none;
  vertical-align: middle;
  z-index: 1230;
  max-width: 900px;
  box-sizing: border-box;
  width: 100%;
  background: #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 10px #000;
  -moz-box-shadow: 0 0 10px #000;
  -o-box-shadow: 0 0 10px #000;
  -ms-box-shadow: 0 0 10px #000;
  box-shadow: 0 0 10px #000;
  text-align: left;
  overflow: auto;
}

---

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