Minimalist Fullscreen Modal Window with jQuery

File Size: 13 KB
Views Total: 6565
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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 -->

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="//"></script>

6. Enable the modal window.


7. Enable the Esc Key to hide the modal.

$(document).keydown(function(e) {
if(e.keyCode == 27) {

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