js/10-modal.js

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