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 = q('.modal');
  17         backdrop = q('.backdrop');
  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                 if(window.matchMedia("(min-width: 768px)").matches){
  25                         show_modal();
  26                         e.preventDefault();
  27                 }
  28         });
  29         $('.backdrop').on('click', hide_modal);
  30         window.onkeyup = event => {
  31                 if (event.keyCode === 27)
  32                         hide_modal();
  33         }
  34 });