Cacher is the code snippet organizer for pro developers

/* Modal Windows
====================================*/

/*
**** HTML File ******
<!-- Buttons -->
<a href="#modal_1" class="show-modal">Modal Window 1</a>
<a href="#modal_1" class="show-modal">Modal Window 2</a>

<!-- Modal Window 1 -->
<div class="modal" id="modal_1">
    <h2>Modal Window 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore aut officiis eaque itaque repudiandae nemo, ea praesentium ullam tempora nisi numquam harum accusamus nihil, animi iure minus quasi labore doloremque.</p>
    <a href="#" class="modal-close">Close</a>
</div>

<!-- Modal Window 2 -->
<div class="modal" id="modal_2">
    <h2>Modal Window 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore aut officiis eaque itaque repudiandae nemo, ea praesentium ullam tempora nisi numquam harum accusamus nihil, animi iure minus quasi labore doloremque.</p>
    <a href="#" class="modal-close">Close</a>
</div>

**** CSS File ******
.overlay {
    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, .7);

    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

.modal {
    width: 300px;
    padding: 20px;

    background: @white;
    text-align: center;

    position: fixed;
    top: 100px;
    left: 50%;
    z-index: 1000;

    display: none;
}
*/

/* JS File
====================================*/

// find through all the modal windows
$(".modal").each(function() {
  
  // learn the half of the width of the modal window
  var modalWidth = $(this).innerWidth() / 2;
  
  // set margin-left for the current modal window
  $(this).css({
    "marginLeft": "-" + modalWidth + "px"
  });
  
});
    
// pluggable event listener to the buttons
$(".show-modal").on("click", function(e) {

  // turn off default properties
  e.preventDefault();
  
  // get the value of the href attribute for the current element
  var currentModal = $(this).attr("href");
  
  // show the window
  $(currentModal).fadeIn(500);
  
  //add overlay to bady and add the class open-modal 
  $("body").append("<div class='overlay' id='overlay'></div>").addClass("open-modal");

});

// Closing the window by clicking on the button
$(".modal-close").on("click", function(e) {
  
  // turn off default properties
  e.preventDefault();
  
  // close the window
  $(".modal").fadeOut(100);

  // remove the class open-modal
  $("body").removeClass("open-modal");
  
  // remove overlay
  $("#overlay").remove();

});

// Closing the window by clicking on overlay
$("body").on("click", "#overlay", function() {
  
  // close the window
  $(".modal").fadeOut(100);
  
  // remove the class open-modal
  $("body").removeClass("open-modal");
  
  // remove overlay
  $("#overlay").remove();
  
});