Question

I have a silverlight control that opens up on a web page. But at the same time, on some user action, a jquery colorbox also opens. That colorbox is not shown as it comes behind the silverlight. Is there any way to change the z-index of silverlight component?

Answer 1

Check that your Silverlight HTML parameters has its windowless mode set to true.

HTML Syntax:

<object ...>
  <param name="windowless" value="bool"/>
  ...
</object>

Or if you’re leveraging Silverlight.js

Silverlight.CreateObject(,,,{windowless:'bool'});
-or-
Silverlight.CreateObjectEx({properties:{windowless:'bool'}});

By default, windowless is set to false. Basically, when false, Silverlight uses its own super-imposed “window” to perform rendering. In this state, it will always appear above all HTML content as it’s not actually using the browser to render. In this state, the Silverlight plugin will essentially ignore the browser/CSS z-index as it’s no longer applicable.

When windowless is set to true, it ties into the browser’s rendering system which lets you layer HTML content (including iframes and jquery color boxes) above it. There are a few downsides to running windowless, but most likely you won’t be affected much. In this state, you’ll be able to leverage the typical z-index ordering within the browser/CSS.

Here’s the MSDN article on it along with the pros/cons and the code snippets I posted above: http://msdn.microsoft.com/en-us/library/cc838156%28VS.95%29.aspx