2011-11-10 95 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

非常感謝該溶液中。它幫助我分析並解決了這個問題。 –