-;(function(){
- 'use strict';
+let modal, backdrop, hiding;
- function show_modal () {
- $('.modal').removeClass('hidden');
- setTimeout(function (){
- $('body').addClass('modal-open');
- }, 20);
- }
+function show_modal () {
+ modal.classList.remove('hidden');
+ backdrop.classList.remove('hidden');
+ setTimeout(function (){
+ document.body.classList.add('modal-open');
+ }, 20);
+}
- function hide_modal () {
- $('body').removeClass('modal-open');
- $('.modal').one('transitionend', function (){
- $('.modal').addClass('hidden');
- });
- }
+function hide_modal () {
+ document.body.classList.remove('modal-open');
+}
- $( document ).ready(function() {
- $('.backdrop,.modal').detach().appendTo('body');
- $('#solution').on('click', function (e){
- show_modal();
- e.preventDefault();
- });
- $('.backdrop').on('click', hide_modal);
- window.onkeyup = function (event) {
- if (event.keyCode === 27)
- hide_modal();
- }
+$(function() {
+ if(window.innerWidth < 768)
+ return;
+ modal = $('.modal')[0];
+ backdrop = $('.backdrop')[0];
+ $(modal).on('transitionend', el => {
+ if(!document.body.classList.contains('modal-open'))
+ modal.classList.add('hidden');
});
-})();
+ $('.backdrop,.modal').each(el => document.body.appendChild(el) );
+ $('#solution').on('click', e => {
+ show_modal();
+ e.preventDefault();
+ });
+ $('.backdrop').on('click', hide_modal);
+ window.onkeyup = event => {
+ if (event.keyCode === 27)
+ hide_modal();
+ }
+});