function popinOpen(e) {
    // Stop propagation
    e.preventDefault();

    document.getElementById('background').style.display = 'block';
    document.getElementById('popin').addEventListener('click', popinClose);
    document.querySelector('#popin [data-type=close]').addEventListener('click', popinClose);
    document.getElementById('popin').style.display = 'flex';
    document.querySelector('#popin [data-type=progress]').style.display = 'flex';

    var node = e.target;
    var url = node.getAttribute('href');
    if (url.indexOf('?') !== false) {
        url += '?popin';
    }
    else {
        url += '&popin';
    }

    // Call ajax
    var oReq = new XMLHttpRequest();
    oReq.addEventListener("progress", popinContentProgress);
    oReq.addEventListener("load", popinContentLoaded);
    oReq.open('GET', url);
    oReq.send();
}

function popinReset() {
    var nodeProgress = document.querySelector('#popin [data-type=progress]');
    if (nodeProgress.childNodes.length > 1) {
        nodeProgress.removeChild(nodeProgress.lastChild);
    }
    document.querySelector('#popin [data-type=content]').innerHTML = '';
}

function popinClose(event) {
    if (event.target.id != 'popin' && event.target.dataset.type != 'close'
        && event.target.type != 'reset') {
        return;
    }
    document.getElementById('background').style.display = 'none';
    document.getElementById('popin').removeEventListener('click', popinClose);
    popinReset();
    document.querySelector('#popin [data-type=close]').removeEventListener('click', popinClose);
    document.getElementById('popin').style.display = 'none';
}

function popinContentLoaded(event) {
    document.querySelector('#popin [data-type=progress]').style.display = 'none';
    document.querySelector('#popin [data-type=content]').insertAdjacentHTML('afterbegin', this.responseText);
    var scriptNodes = document.querySelectorAll('#popin [data-type=content] script');
    Array.prototype.filter.call(scriptNodes, function (node) {
        eval(node.innerHTML);
    });

    //console.log(document.querySelector('#popin [data-type=content]'));
    //eval(document.querySelector('#popin [data-type=content]'));
}

function popinContentProgress(event) {
    if (event.lengthComputable) {
        var percentComplete = event.loaded / event.total;
        var percentText = (percentComplete * 100) + '%';
        var nodeProgress = document.querySelector('#popin [data-type=progress]');
        if (nodeProgress.childNodes.length > 1) {
            nodeProgress.lastChild.innerHTML = percentText;
        }
        else {
            nodeProgress.insertAdjacentHTML('beforeend', '<span>' + percentText + '</span>');
        }
    }
}

var popinElements = document.querySelectorAll('a[data-target=popin]');
Array.prototype.filter.call(popinElements, function (link) {
    link.addEventListener('click', popinOpen);
});
@@ -174,45 +174,30 @@
 n').
-addEventListener('click', popinClose)
+style.display = 'flex'
 ;%0A  
@@ -244,54 +244,42 @@
 ype=
-close%5D').addEventListener('click', popinClose)
+progress%5D').style.display = 'flex'
 ;%0A  
@@ -313,38 +313,53 @@
 popin').
-style.display = 'flex'
+addEventListener('click', popinClose)
 ;%0A    do
@@ -402,42 +402,108 @@
 ype=
-progress%5D').style.display = 'flex'
+close%5D').addEventListener('click', popinClose);%0A    document.addEventListener('keydown', popinClose)
 ;%0A%0A 
@@ -1327,20 +1327,43 @@
  'reset'
+ && event.keyCode != 27
 ) %7B%0A
-
         
@@ -1368,32 +1368,50 @@
   return;%0A    %7D%0A
+    popinReset();%0A
     document.get
@@ -1452,32 +1452,93 @@
 splay = 'none';%0A
+    document.getElementById('popin').style.display = 'none';%0A
     document.get
@@ -1600,34 +1600,16 @@
 Close);%0A
-    popinReset();%0A
     docu
@@ -1714,54 +1714,50 @@
 ent.
-getElementById('popin').style.display = 'none'
+removeEventListener('keydown', popinClose)
 ;%0A%7D%0A

Add keycode manager to detect escape to close popin