js/10-modal.js

   1 var modal, hiding;
   2
   3 function show_modal () {
   4         modal.classList.remove('hidden');
   5         setTimeout(function (){
   6                 document.body.classList.add('modal-open');
   7         }, 20);
   8 }
   9
  10 function hide_modal () {
  11         document.body.classList.remove('modal-open');
  12 }
  13
  14 $(function() {
  15         modal = $('.modal')[0];
  16         $(modal).on('transitionend', function (){
  17                 if(!document.body.classList.contains('modal-open'))
  18                         modal.classList.add('hidden');
  19         });
  20         $('.backdrop,.modal').each(function(el){
  21                 document.body.appendChild(el);
  22         });
  23         $('#solution').on('click', function (e){
  24                 show_modal();
  25                 e.preventDefault();
  26         });
  27         $('.backdrop').on('click', hide_modal);
  28         window.onkeyup = function (event) {
  29                 if (event.keyCode === 27)
  30                         hide_modal();
  31         }
  32 });