Remove From My Forums

ModalPopupExtender hides behind iFrame

Question
0

Sign in to vote

User-2020087258 posted

I am working with .Net 2.0 using Visual Studio 2005 and the corresponding AjaxControlToolkit .

I have a master page with a ModalPopupExtender that appears some number of seconds before the browser session times out. Everything works perfect, except for one condition. One of the web pages has an iFrame used to display a PDF. If the user is on this page and the modal popup is displayed, the modal popup hides behind the iFrame and the user cannot see it.

I have seen a few posts regarding this issue, but no resolution. Maybe the problem is fixed in .Net 3.5 and above, but I cannot migrate to the newer version just yet, so resolving the problem as it is would be awesome and much appreciated!

Thanks.

Friday, September 10, 2010 11:31 AM

Answers

User-1102123764 posted

Hi,

It is not a problem for .NET Framework or AjaxControlToolkit, it is a problem for the HTML DOM. PDF or some other Web COM like Applet has a higher layer order than the common tag like div. The workaround is to use iframe to hold the content of the panel which need to popup.

Here is a sample.

Message.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="message.aspx.cs" Inherits="message" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        body
        {
            background-color: Red;
            margin: 0px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    this is a message in a iframe
    </form>
</body>
</html>

Demo page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .PopMP
        {
            width: 300px;
            height: 200px;
        }
        .transparent
        {
            filter: alpha(opacity=10);
            -moz-opacity: 0.1;
            -khtml-opacity: 0.1;
            opacity: 0.1;
            background-color: White;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <asp:Button ID="Button1" runat="server" Text="Show MP" />
        <iframe width="500" height="500" src="test.pdf">
        </iframe>
        <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="PopMP"
            TargetControlID="Button1" PopupDragHandleControlID="mask">
        </asp:ModalPopupExtender>
        <asp:Panel ID="PopMP" runat="server">
            <asp:Panel ID="mask" runat="server" CssClass="PopMP transparent" Style="z-index: 100;
                ">
            </asp:Panel>
            <iframe runat="server" id="message" frameborder="0" scrolling="no" class="PopMP"
                src="message.aspx"></iframe>
        </asp:Panel>
    </div>
    </form>
</body>
</html>

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Monday, September 13, 2010 10:49 PM

All replies

0

Sign in to vote

User-826727127 posted

Have you tried viewing the source of the page under those conditions? Does your ModalPopup Extender have a BackgroundCssClass property set? The ModalPopupExtender seems to generate an iframe itself when it's called, so maybe try setting the existing iframe's z-index to -1 and see if that fixes it.

Friday, September 10, 2010 1:06 PM
0

Sign in to vote

User-2020087258 posted

Thanks for the reply. Yes the ModalPopupExtender does have BackgroundCssClass. The CSS is:

.modalBackground {
background-color:black;
filter:alpha(opacity=65);
opacity:0.7;
}

Changing the z-index for the background or foreground CSS does not appear to change the behavior.

When I view source, the only iFrame tag is the one for the PDF displayed on the page. Setting this iFrame z-index to -1 does not change the behavior, unfortunately. When viewing the source, the HTML for the ModalPopup is simply the AJAX javascript stuff.

Friday, September 10, 2010 1:33 PM