Simple Plain jQuery Modal Plugin - Lalien Modal Window

A simple, lightweight (< 1kb), responsive jQuery modal plugin which enables you to embed any Html content into a fullscreen popup window. Click anywhere on the blank area to click the opened modal window.

How to use it:

1. Include jQuery JavaScript library and the jQuery Lalien Modal Window plugin in your project.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="box.js"></script>

2. Embed your modal content into a DIV element.

<div class="hidden-modal">
  Modal Content Goes Here
</div>

3. Create a link with the CSS class of modal-window-trigger to trigger the modal window.

<a class="modal-window-trigger" href="#">Click me!</a>

4. Done. You can style the modal window in the CSS whatever you like.

.hidden-modal {
  display: none;
  text-align: center;
  background-color: rgba(0,0,0,0.7);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
  padding-top: 10%;
  padding-bottom: 40%;
}

.hidden-modal img { width: 50%; }

.hidden-modal iframe { ... }

.hidden-modal video { ... }

.hidden-modal p { ... }

@media (max-width: 1024px) {

.hidden-modal { padding-top: 20%; }

.hidden-modal img { width: 75%; }

.hidden-modal iframe { ... }

.hidden-modal video { ... }

.hidden-modal p { ... }

}

Change logs:

2015-04-04

• Adding and removing click event conditions.

2015-03-13

• Automatic modal window height

---

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