Can't focus on a div (it won't scroll if I scroll with the mouse, unless I click the content)

Question

So I've got a little website, that shows div when I click a link, so the window is on the front.

Just click on the big green frame, and you'll see the window opening. Now the thing is that, if you open it, and try to scroll, without having clicked the content, it won't scroll, while it should. How can I fix this ?

The code called is this one, the animation thing is based on keyframes.

function displayBox(boxId, closeButtonId) {
    displayButton(closeButtonId);
    var Box = document.getElementById(boxId);
    Box.setAttribute('class', 'boxIn');
    Box.setAttribute('tabIndex', '0');
}
function displayButton(buttonId) {
    var Box = document.getElementById(buttonId);
    Box.setAttribute('class', 'buttonIn');
}           
function hideBox(boxId, closeButtonId) {
    var Box = document.getElementById(boxId);
    Box.setAttribute('class', 'boxOut');
    setTimeout(function(){var Box = document.getElementById(boxId);
    Box.setAttribute('class', 'invisible');},500);
    hideButton(closeButtonId);
}
function hideButton(buttonId) {
    var Box = document.getElementById(buttonId);
    Box.setAttribute('class', 'invisible');
}

Thank you in advance

Answer 1

You need to set focus on the new popup. Try to add Box.focus() call to displayBox function:

function displayBox(boxId, closeButtonId) {
    displayButton(closeButtonId);
    var Box = document.getElementById(boxId);
    Box.setAttribute('class', 'boxIn');
    Box.setAttribute('tabIndex', '0');
    setTimeout(function() {
        Box.focus();
    }, 300);
}

Note, that since you animate your modal popup you need to focus content after animation is complete. The simplest way to achieve it is to invoke focus() after timeout equal to animation duration, in your case 300ms . If you don't want to hardcode animation timing in the JS function, then you should listen animationend event.

Answer 2

You have set overflow: hidden for your html tag in css and so the page won't scroll.

Remove it to fix.

Overflow is a proprerty that explains how to handle what doesn't fit window size. Hidden means: hide it and doesn't show at all. Scroll is the default if you don't specify anything.