Minimalist Fullscreen Modal Window with jQuery

A really simple, small, classic, fullscreen modal window with smooth fadeIn / fadeOut transitions built using Html, CSS and a little jQuery magic.

How to use it:

1. Create a modal window as follow.

<div class="Modal">
  <div class="Close"><img src="Close.svg"></div>
  <!-- Content Here -->
</div>

2. Create a button to toggle the modal window.

<a class="trigger-button" href="#">Open Modal</a>

3. Style the modal window in the CSS.

.Modal {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #8e44ad;
  z-index: 9999;
}

4. Position the close icon.

.Modal .Close {
  position: absolute;
  top: 25px;
  right: 65px;
  z-index: 999;
  cursor: pointer;
}

5. Load the needed jQuery library.

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

6. Enable the modal window.

$(document).ready(function(){
  $(".Modal").hide();
    $(".Ghost-Blue").click(function(){
      $(".Modal").fadeToggle();
    });
    $(".Close").click(function(){
      $(".Modal").fadeOut();
    });
});

7. Enable the Esc Key to hide the modal.

$(document).keydown(function(e) {
if(e.keyCode == 27) {
    $(".Modal").hide(300);
}
});

---

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