Jquery simplemodal on top of iframe with flash content issue

Hi all,

I’m having issues with the SimpleModal jQuery plugin working with my page. The page has a top bar which will house logo, links, etc. The rest of the page will have an iFrame that houses a flash flip book presentation. I need this set up to dynamically load different flip books within a central php page.


The issue is with the ‘email a friend’ button. It works fine in Chrome. Half works in Firefox [the overlay container doesn’t fill the page but the dialog still shows]. Doesn’t work in IE10 at all. Cannot figure out a solution. I’ve tried:

  • ?wmode=transparent / opaque as part of the iframe src URL. Didn’t work.
  • I’ve tried changing the zIndex of the SimpleModal, still no go.
  • Tried z-index for the css styling the modal div.

All the code is accessible via the page source. The modal div elements are created upon clicking on the email a friend button. I’m thinking maybe if I have these modal divs already present and hidden during page initialisation, and to show when the button is clicked. Do you think that would resolve? Don’t have much time due to fast approaching deadline!

Many thanks! :smiley:

[Edit] swfobject.js is used to display the flash file. I’m trying to find out how I can apply the (“wmode”, “transparent”) parameter here which may resolve. Feel free to help… Thanks

Resolved!! I had to pass the wmode:“transparent” param as part of the swfobject.embedSWF function that outputs the flash file.