Concise Static Modal Window Plugin - jQuery Overlay

An ultra-light jQuery based overlay component to place web content in an overlay that covers the entire page similar to a modal window.

How to use it:

1. Create an empty container for the overlay.

<div class="overlay-veil"></div>

2. Create overlay content in the document. Note that each overlay must have a unique ID to prevent conflicts.

<div class="overlay-component" data-overlayItem="1">
  <div class="closeOverlay">Close</div>
  <h1>My Overlay 1</h1>
  <div class="ov-content">
    Content 1
  </div>
</div>

<div class="overlay-component" data-overlayItem="2">
  <div class="closeOverlay">Close</div>
  <h1>My Overlay 2</h1>
  <div class="ov-content">
    Content 2
  </div>
</div>

... more content here ... 

3. Create trigger links to overlay the content on the top of the page.

<a href="#" class="overlay-item-click" data-overlay="1">
  Launch Overlay 1
</a>

<a href="#" class="overlay-item-click" data-overlay="2">
  Launch Overlay 2
</a>

4. Load the Overlay plugin's script after loading the latest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/main.js"></script>

5. Customize the overlay in the CSS.

.overlay-veil {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #cecece;
  display: none;
}

6. Apply CSS styles to the overlay content.

.overlay-component {
  width: 400px;
  height: 400px;
  background: #fff;
  position: absolute;
  color: #fff;
  border-radius: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  padding: 15px;
  display: none;
}

.overlay-component .closeOverlay {
  color: #db2424;
  cursor: pointer;
}

.overlay-component h1 {
  color: #4a4a4a;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.overlay-component .ov-content {
  color: #868686;
}

---

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