Minimalist jQuery Responsive Modal Window Plugin

A super simple jQuery lightbox script which uses a click button to trigger a responsive & nice-looking modal window. In addition, it happens on a Javascript click function, which loads on 'document ready'.

How to use it:

1. Create a click button to trigger the lightbox.

<div class="trigger-button">
  click me
</div>

2. Embed your content into the lightbox with a close button.

<div class="lightbox">
  <h1>I'm a lightbox</h1>
  <p>Modal content</p>
  <div class="close-button"> X </div>
</div>

3. Style the lightbox and make it responsive via CSS/CSS3.

.lightbox {
  display: none;
  margin: 0 auto;
  background: #ffffff;
  width: 500px;
  padding: 0 20px 30px 20px;
  border: 6px solid #222429;
  border-radius: 5px;
  margin-top: 150px;
}

.lightbox h1 {
  text-align: center;
  background: #ed425a;
  width: auto;
  padding: 10px;
  color: #ffffff;
  text-transform: uppercase;
}

.lightbox p {
  margin-left: 20px;
  margin-right: 20px;
}

.close-button {
  display: none;
  text-align: center;
  margin: 0 auto;
  width: 10px;
  border-radius: 50%;
  padding: 5px 10px 5px 10px;
  color: #d73c52;
  text-transform: uppercase;
  margin-top: 70px;
  border: 1px solid #d73c52;
}

.close-button:hover {
  background: #ed425a;
  cursor: pointer;
  color: #ffffff;
}

.close-button:active { background: #e43f57; }

@media only screen and (max-width: 40em) {
.lightbox { width: 80%; }
}

4. Include the needed jQuery Javascript library at the end of the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

5. Click function to open Lightbox and hide Click button.

$('.close-button').click(function(){
  $(this).css('display', 'none');
  $('.lightbox').css('display', 'none');
  $('.trigger-button').css('display', 'block');
});

6. Click function to hide Lightbox and hide Close button.

$('.trigger-button').click(function(){
  $('.lightbox').css('display', 'block');
  $('.close-button').css('display', 'block');
  $(this).css('display', 'none');
});

---

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