Putting a Silverlight Control inside of a ASP.Net Modal Popup (that works in firefox)
After looking around for a solution to a problem I was having with Silverlight and modal pop-ups I came up empty handed. There were a couple of suggestions that I tried, but they didn’t fix the issue. The issue is that if I place a Silverlight control inside of a modal popup, the Silverlight box would load, but the content wouldn’t work. (This may only apply to the video player, but I think it has further reaches.) I found that this issue only happened in Firefox and not Internet Explorer. I tried using jqModal to see if it would fix the problem, but I found out it didn’t so I reverted back to ASP.net’s Modal popup extender.
After a while I realized that I might be able to apply jqModal’s image cache technique to solve this issue.� Instead of defaulting the CSS display value to hidden, I allowed the underlying panel to be shown (if you have used the Asp.net Modal Pop-up extender before you know that it would sometimes flash it’s content while the massive JavaScript loaded, so the solution was to set the panels display element to hidden). I then used CSS to move the modal window way off screen, knowing that the extender would bring it back to where it needed to be with JavaScript. �For whatever reason, this allows Firefox to load what it needs to for the Silverlight control and fixes the issue.
A code sample of how I fixed the issue is below. Feel free to publish and use this solution.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <asp:ImageButton runat="server" ImageUrl="~/buttonImg.jpg" ID="btnImage" OnClick="btnImage_Click"/> <style type="text/css"> @media projection, screen { div.offScreen { position: absolute; left: -8000px; top: -8000px; } div.offScreen img { display:block; } } @media print { div. offScreen { display: none; } } </style> <div class="offScreen "> <asp:Panel ID="pnlVideo" runat="server" CssClass="modalPopup" style="width:300px; "> <div style="border: 1px solid black; width:328px; height:240px;"> <asp:Silverlight ID="VideoPlayer" runat="server" Source="~/ClientBin/VideoPlayer.xap" InitParameters="m=Media/video.wmv,autohide=true,autostart=true" Width="328px" Height="240px" /> </div> <div style="padding: 15px;"> <asp:Button ID="btnClose" runat="server" Text="Close" OnClick="btnClose_Click" /> </div> </asp:Panel> <ajax:ModalPopupExtender runat="server" TargetControlID="btnHidden" PopupControlID=" pnlVideo" BackgroundCssClass="modalBackground" ID="modalPopup" /> <asp:Button ID="btnHidden" runat="server" style="display:none;" /> </div> |
