2011-11-10 54 views
2

我在页面上嵌入了一个小型Silverlight应用程序以提供跨浏览器“复制到剪贴板”功能的HTML表格。整个“应用程序”是一个按钮,可以将值从嵌入的行复制到剪贴板。我也在页面的其他区域使用jQueryUI Dialog小部件。当对话框打开时,它将显示在页面上的所有其他内容之上,但这些Silverlight按钮除外。出于某种原因,我无法将模式对话框置于这些按钮之上,这显然是一个很大的可用性问题。Silverlight内容显示在HTML内容的顶部

我已经做了相当多的研究,但还没有找到可行的解决方案。我相信这个问题源于我对Silverlight与DOM的关系以及它如何影响布局和样式的深入理解。我已经尝试了几件事情,包括将“无窗”属性设置为true,并将背景设置为“透明”,我也玩过一些我在博客上找到的样式解决方法。不幸的是没有工作。

下面是用于实例化每行Silverlight插件的代码。

Silverlight.createObjectEx({ 
    "source": src, 
    "parentElement": cell, 
    "id": String.format("pluginHost_{0}", id), 
    "properties": { 
     "height": "16", 
     "width": "16", 
     "background": "transparent", 
     "windowless": true, 
     "enableHtmlAccess": true, 
     "version": "4.0.50826.0" 
    }, 
    "events": { 
     "onLoad": null, 
     "onError": null 
    }, 
    "initParams": String.format("url={0}", item.Url), 
    "context": null 
}); 

正如我以前说过,这只是一个小(16像素)按钮,带一个URL与其关联的数据行作为一个初始化参数,并且到剪贴板只要按下按钮副本。由于数据是通过外部Web服务动态加载的,因此我使用Silverlight.js库加载插件,以便在每行上初始化插件时传入数据。

谁能告诉我为什么我的表格中的按钮显示在模式对话框(以及我在表格顶部移动的任何其他元素)的顶部?

下面是我所看到的截图。

enter image description here

谢谢!

回答

2

我遇到了一个类似的问题,我试图在Silverlight容器上显示gif progress图像。为此我有一个预先写好的JavaScript。它没有像预期的那样工作,因为silverlight总是用在网页上的其他元素的顶部。

我想这为我工作如下:

添加你在哪里在网页中创建的Silverlight对象以下内容:

<param name="windowless" value="true" /> 

例子:

<div id="silverlightControlHost"> 
    <object id="SilverlightObject" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="800" height="500" style="z-index:1" > 
    <param name="source" value="ClientBin/GIF2.xap"/> 
    <param name="onError" value="onSilverlightError" /> 
    <param name="windowless" value="true" /> 
    <param name="background" value="white" /> 
    <param name="minRuntimeVersion" value="4.0.50826.0" /> 
    <param name="autoUpgrade" value="true" /> 
    <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none"> 
     <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/> 
    </a> 
    </object> 
</div> 

我也不得不除了上述参数之外,还要使用z-index属性。

为了显示一个高于另一个,我只需要根据需要使用javascript更改它们的z-index。

实施例:

var divelement = document.getElementById("element_to_be_on_top"); 
divelement.style.zIndex = 999; 

参考: http://weblogs.asp.net/dwahlin/archive/2010/05/10/integrating-html-into-silverlight-applications.aspx

+0

非常感谢该溶液中。它帮助我分析并解决了这个问题。 –