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