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="//code.jquery.com/jquery-2.1.4.min.js"></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>
</div>

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

setTimeout(function(){
  $(".mask").addClass("active");
}, 500);

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

$(".show").on("click", function(){
  $(".mask").addClass("active"); 
});

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(){
  closeModal();
});

// Closes the modal with the button within the content
$(".content-button").click(function(){
  closeModal();
});

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

---

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