Содержимое Silverlight отображается поверх содержимого HTML - PullRequest
Новая
       5

Содержимое Silverlight отображается поверх содержимого HTML

2 голосов
/ 10 ноября 2011

У меня есть HTML-таблица на странице, которая встраивает крошечное приложение Silverlight, чтобы обеспечить кросс-браузерную функцию «Копировать в буфер обмена». Все «приложение» представляет собой одну кнопку, которая копирует значение в буфер обмена из строки, в которую оно встроено. Я также использую виджет 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
});

Как я уже говорил, это просто маленькая (16px) кнопка, которая берет URL из связанной строки данных в качестве параметра инициализации и копирует его в буфер обмена при каждом нажатии кнопки. Поскольку данные загружаются динамически через внешний веб-сервис, я загружаю плагин с помощью библиотеки Silverlight.js, чтобы я мог передавать данные, так как плагин инициализируется в каждой строке.

Может кто-нибудь сказать мне, почему кнопки в моей таблице отображаются в верхней части модального диалога (и любой другой элемент, который я перемещаю поверх таблицы)?

Вот скриншот того, что я вижу.

enter image description here

Спасибо!

1 Ответ

2 голосов
/ 19 февраля 2012

Я столкнулся с подобной проблемой, когда пытался отобразить изображение прогресса в gif поверх контейнера с серебряным светом. Для этого у меня был заранее написанный 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 в дополнение к вышеуказанному параметру.

Чтобы показывать один над другим, я просто изменяю их z-index, используя javascript, как требуется.

Пример: 

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

...