Javascript modal on top of Flash games, in all browsers...

Question

So we have a weird issue at work. We need to display a Flash game which uses the keyboard, when the game finishes, it triggers a modal popup via Javascript. We're using the wmode param set to opaque so that the modal displays on top of the Flash elment.

All works fine, except in IE6/7. When you press the UP or DOWN keys on the keyboard, it scrolls the page up and down, as well as sending the keyboard input to the game.

The only fix we seem to have found for this, is to remove the classid attribute completely from the object tag. But that causes the Flash element to display on top of our Javascript modal in both IE6/7.

So it seems we can only have one or the other, but not both if we wanna support IE.

Any help, hints, pointers or anything would be great, cause there's not really much available online about these kinda issues. At least not according to Google.

Answer 1

I'm not sure this is the best solution, but you could look into binding the keyboard events in the browser (or just in IE) so they don't fire as long as the visitor is playing the game. onkeyup, onkeydown and onkeypress are the events to look at. This way you can have the object tag in there, while preventing the default scrolling behaviour.

Hope this helps!

Answer 2

A simple solution would to be to toggle the overflow style for the body/html element on your page to hidden. This disables the page from scrolling, but should maintain your position on the page.

//toggle this on and off when showing the window
document.body.style.overflow = 'hidden';