js/10-modal.js

   1 let modal, hiding;
   2
   3 function show_modal () {
   4         modal.classList.remove('hidden');
   5         q('.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 = q('.modal');
  17         $(modal).on('transitionend', el => {
  18                 if(!document.body.classList.contains('modal-open'))
  19                         modal.classList.add('hidden');
  20         });
  21         $('.backdrop,.modal').each(el => document.body.appendChild(el) );
  22         $('#solution').on('click', e => {
  23                 if(window.matchMedia("(min-width: 768px)").matches){
  24                         show_modal();
  25                         e.preventDefault();
  26                 }
  27         });
  28         $('.backdrop').on('click', hide_modal);
  29         window.onkeyup = event => {
  30                 if (event.keyCode === 27)
  31                         hide_modal();
  32         }
  33 });