Problem with Flash appearing on top of Facebox

logo.png

Facebox is a modal window plugin for jQuery. It's fantastic, so give it a go.

The problem

I just had an issue with Flash appearing above a Facebox window in one of the projects I've been working on. Thought it may be useful to post the solution I found, since it wasn't an instant find for me.

The solution

When you embed flash on a page, you'll almost always have an <object> element and an <embed> element.

What you need to do is add <param name="wmode" value="transparent"></param> as a child element to the <object> element, and add wmode="transparent" as an attribute to the <embed> element.

That's it, fixed it nicely for me :) Happy coding!
Filed under  //   facebox   flash   javascript   jquery   problem   solution  

Comments (15)

Jun 25, 2009
Jay Charles said...
Keep in mind that you need to be careful with wmode and flash. On some browsers it can break functionality. For example, on some versions of Firefox, a transparent .swf cannot receive text input.
Jul 01, 2009
Joel Gascoigne said...
Thanks for the pointer Jay! That wasn't something I was aware of.
Jul 08, 2009
Darwin said...
Nice. Same thing happens with aurigma image uploader (java applet).
Have a solution on this?
Jul 11, 2009
Joel Gascoigne said...
Sorry Darwin, I don't know anything about aurigma image uploader. Hopefully someone else will or you find a solution somewhere.
Aug 24, 2009
Roberto said...
Thank you sooo much! It worked like a charm!
Sep 22, 2009
nil said...
thanks this helped!
Oct 02, 2009
Joel Gascoigne said...
Thanks guys, I'm delighted it's proving helpful :)
Nov 10, 2009
Francisco said...
Thank you very much Joel!!!
You safe my life lol lol.
I was looking for a solution and I hadn´t found anything.
Nov 11, 2009
Joel Gascoigne said...
That's fantastic to hear Francisco! Glad it was useful :)
Jan 04, 2010
Randy Lewis said...
THANK YOU! I was searching for a fix! This worked perfectly! A+
Feb 08, 2010
Wayne said...
Hi. I have a different problem.
I designed a flash game and it activates the facebox from a flash button.(http://www.ushakamarineworld.co.za/Sushi-Game-2010/sushi-game-2010.php) My wmode cannot be set to transparent, because then the page scrolls when the user plays the game and presses the down or up keys.

I have to set my wmode to window.
In Firefox and Safari everything works 100%, but in IE the flash pops in on top of the facebox overlay and content.

Anyone have a suggestion? Thanx

Feb 18, 2010
Joel Gascoigne said...
Hi Wayne,

I had a little look but I'm afraid I can't find any answers either.

Maybe you could try asking on StackOverflow?

Best of luck.

Jun 23, 2010
albertjohn12 said...
Wow!! Its fantastic site. Thank you for giving such useful information windows hosting nice article , good work , keep posting like this .
Jun 23, 2010
albertjohn12 said...
Wow!! Its fantastic site. Thank you for giving such useful information windows hosting nice article , good work , keep posting like this .
Sep 27, 2011
Colin said...
Thank you so much for posting this Joel, it must have saved me a good hour of messing around looking for a solution.

Leave a comment...

About

Startup guy and full stack web developer. Most recently founded Buffer, also co-founded OnePage. Keen to learn and striving to do what I love. Say hello :)

I post my longer reflections over on my blog.

TwitterFacebookLaconi.ca/Identi.caLinkedInFriendfeedFlickrYoutubeVimeoDeliciousTumblr