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

so i've got little website, shows div when click link, window on front.

just click on big green frame, , you'll see window opening. thing that, if open it, , try scroll, without having clicked content, won't scroll, while should. how can fix ?

the code called one, animation thing 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 in advance

you need set focus on new popup. try add box.focus() call 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, since animate modal popup need focus content after animation complete. simplest way achieve invoke focus() after timeout equal animation duration, in case 300ms. if don't want hardcode animation timing in js function, should listen animationend event.