Simple CSS3 Animated Modal Window with jQuery - elegantModal

File Size: 73.2 KB
Views Total: 4229
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple CSS3 Animated Modal Window with jQuery - elegantModal

A jQuery / CSS approach to creating a simple, nice-looking modal window with smooth CSS3 animations. jQuery is used only to toggle CSS classes when you toggle the modal on and off.

How to use it:

1. Load the core stylesheet style-elegant-modal.css in your document's head section.

<link rel="stylesheet" href="css/style-elegant-modal.css">

2. Load the needed jQuery JavaScript library in the document.

<script src="//"></script>

3. Create a modal toggle button if needed.

<button class="show" aria-haspopup="true">Open Modal</button>

4. Create the main content for the modal.

<div class="mask" role="dialog"></div>
<div class="elegant-modal" role="alert">
  <button class="close" role="button">X</button>
  <h1 class="title-modal">Modal Content</h1>
  <hr class="line-modal">
  <p class="paragraph-modal">More Content</p>
  <button class="content-button">Close</button>

5. The JavaScript to open the modal when the page finishes loading (with time to display animation).

}, 500);

6. The JavaScript to active the modal toggle button (Finds .mask class and adds the active class).

$(".show").on("click", function(){

7. The JavaScript to close the modal.

function closeModal(){
  $(".mask").removeClass("active"); //Remove the active class

// Function to close the modal screen
$(".close, .mask").on("click", function(){

// Closes the modal with the button within the content

// or the keyboard (esc)
$(document).keyup(function(e) {
  if (e.keyCode == 27) {

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