Silverlight 콘텐츠가 HTML 콘텐츠 상단에 표시됩니다.

Question

크로스 브라우저 "클립 보드에 복사"기능을 제공하는 작은 Silverlight 앱을 포함하는 페이지에 HTML 테이블이 있습니다. 전체 "app"은 클립 보드가 삽입 된 행에서 클립 보드로 값을 복사하는 단일 버튼입니다. 또한 페이지의 다른 영역에 jQueryUI Dialog 위젯을 사용하고 있습니다. 대화 상자가 열리면 페이지의 다른 모든 내용 위에 표시됩니다. Silverlight 단추. 웬일인지 모달 대화 상자가 그 버튼 위에 놓이는 것은 불가능합니다. 분명히 커다란 유용성 문제입니다.

저는 많은 연구를 해본 결과 아직 해결 된 해결책을 찾지 못했습니다. 이 문제는 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 
}); 

내가 전에 말했듯이, 그것은 초기화 매개 변수와 클립 보드에 버튼을 누를 때마다 복사본으로 관련 데이터 행에서 URL을 소요 단지 작은 (16px) 버튼입니다. 데이터가 외부 웹 서비스를 통해 동적으로로드되기 때문에 Silverlight.js 라이브러리를 사용하여 플러그인을로드하므로 각 행에서 플러그인이 초기화 될 때 데이터를 전달할 수 있습니다.

내 테이블의 버튼이 모달 대화 상자 (및 테이블 상단으로 이동하는 다른 요소) 상단에 왜 표시되는지 누가 알 수 있습니까?

다음은 내가보고있는 스크린 샷입니다.

감사합니다!

Answer 1

저는 실버 라이트 컨테이너 위에 gif 진행 이미지를 표시하려고했던 것과 비슷한 문제에 직면했습니다. 이를 위해 미리 작성된 자바 스크립트가 있습니다. 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- 색인을 변경하기 만하면됩니다.

예 :

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