js/10-modal.js

   1 let 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', el => {
  17                 if(!document.body.classList.contains('modal-open'))
  18                         modal.classList.add('hidden');
  19         });
  20         $('.backdrop,.modal').each(el => document.body.appendChild(el) );
  21         $('#solution').on('click', e => {
  22                 show_modal();
  23                 e.preventDefault();
  24         });
  25         $('.backdrop').on('click', hide_modal);
  26         window.onkeyup = event => {
  27                 if (event.keyCode === 27)
  28                         hide_modal();
  29         }
  30 });