3

We use jQuery modal dialog box to get confirmation from users before they delete an item. The modal dialog works fine as long as there are no YouTube videos on the screen.

If there is a YouTube video the dialog box is displayed beneath the video. I tried changing the z-index of dialog to 3999, but no use. (I don't know much about CSS)

               $('#dialog').dialog({
                     autoOpen: false,
                     modal: true,
                     width: 300,
                     zindex:3999,
                     buttons: {
                                'Ok': performDelete_dialog, 
                                'Cancel': function(){$(this).dialog('close');}
                              }
                  });

Can some one suggestme what should we do to place jquery dialog box on top of YouTube videos?

Gopinath
  • 1,858
  • 7
  • 31
  • 50

4 Answers4

2

Replace zindex with zIndex; jQuery takes these properties in camelCase. Also, make sure the value you are specifying for the z-index is more than that of the Flash movie on the page.

To find out the z-index of the Flash movie on the page, you could use FireBug (A FireFox addon), which will also prove very helpful if you are learning CSS or doing a lot of web development.

Sinan Taifour
  • 10,521
  • 3
  • 33
  • 30
  • I changed zindex to zIndex. But no luck. YouTube videos are always on top even if i set the zIndex of dialog to 10000!! – Gopinath Jul 16 '09 at 10:02
2

see this u may get solution

Community
  • 1
  • 1
Shiva Srikanth Thummidi
  • 2,898
  • 4
  • 27
  • 36
  • Works for me.... for those of you too lazy to click the link and follow through. In the you tube object tag add a pram and in embed tag an attrubute similar to: wmode="transparent" – Kieran Jun 23 '10 at 01:15
1

It's a problem with Flash - see http://www.ubercart.org/forum/support/2261/youtube_overlapping_thickbox

This looks like a flash issue. Try changing your "wmode" parameter on the YouTube clip to "transparent" or "opaque."

Jag
  • 11
  • 1
0

found in jquery dialog demo

$('#element').dialog({zIndex: 3999});
kleopatra
  • 51,061
  • 28
  • 99
  • 211
mweldan
  • 1