Help - stuck with the "black box" ModalPopupExtender problem

Home ›

ASP.NET Forums » ASP.NET AJAX » ASP.NET AJAX Control Toolkit » Help - stuck with the "black box" ModalPopupExtender problem

Shortcuts

Previous Next

Help - stuck with the "black box" ModalPopupExtender problem

Rate It (1)

Last post 08-29-2008 10:13 AM by waxler. 2 replies.

Sort Posts:

Help - stuck with the "black box" ModalPopupExtender problem

08-26-2008, 3:56 PM

Contact

point Member
waxler
Member since 08-26-2008, 3:41 PM
Posts 2

Yikes

This is my first attempt at using the ModalPopupExtender. I am trying to do the "hidden button" technique of popping a modal popup for an informational message following input. The events seem to be working but I have some sort of formatting problem. I even copied the css files out of another project where the popups are working. All I get is a black box where the popup panel is supposed to appear and no gray background. I have tried this on three different browers and although there are some slight differences, it's broken in all.

Who can find what I have done wrong?

Here is the code from a small project I created to demo my problem:

Default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="rawpopup._Default" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

"-//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" >
"server">
    
       "~/App_Data/ModalDialogs.css" rel="stylesheet" type="text/css" runat="server" id="mDialogs" visible="false" />
       "~/App_Data/ModalPanel.css" rel="stylesheet" type="text/css" runat="server" id="mPanel" visible="false" />
    "text/css">
        #form1
        {
            height: 407px;
        }
    

    "form1" runat="server">
     "pnlEditError" runat="server" Style="display: none"
                                                CssClass="modalPanel" Height="200px" 
            Width="400px" HorizontalAlign="Center" >
                                                    "lblEditError" runat="server"  EnableViewState="False" 
                                                        Text="This is a test of the error panel">
                                                    

                                                    

                                                    "btnEditErrorContinue" runat="server" 
                                                        onclick="btnEdirErrorContinue_Click" Text="Continue" 
                                                        CausesValidation="False" />
                                                
    "Button1" runat="server" onclick="Button1_Click" Text="Button" />
    "btnHidden" runat="server" Text="Button" 
         Style="display: none" />
    "ModalPopupExtender1" runat="server" 
        PopupControlID="pnlEditError" TargetControlID="btnHidden" 
        BackgroundCssClass="modalBackground" DropShadow="True">
    
    "ScriptManager1" runat="server">
    
Default.aspx.cs:   using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace rawpopup
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            ModalPopupExtender1.Show();
        }

        protected void btnEdirErrorContinue_Click(object sender, EventArgs e)
        {
            ModalPopupExtender1.Hide();
        }
    }
}

Re: Help - stuck with the "black box" ModalPopupExtender problem

08-29-2008, 3:09 AM

Contact

Answer

62,705 point All-Star
Vince Xu - MSFT
Member since 11-28-2007, 9:50 AM
Posts 5,372

Hi,

The "black box" is because of the css class of Panel is not worked.

Please add the css file in the page. It's just like: <link href="../StyleSheet.css" mce_href="../StyleSheet.css" rel="stylesheet" type="text/css" /> (You can use ../ to direct the relative directory of css file.)

You can get more information from http://htmlhelp.com/reference/css/style-html.html.

From your code, "~/App_Data/ModalPanel.css" rel="stylesheet" type="text/css" runat="server" id="mPanel" visible="false" /> is not a correct format. And please do not put the css file in the App_Data folder.

The easiest way to add css file into the page is draging the css file into the page directly in VS.

Or you can define the modalPanel and modalBackground class in the currect page.

.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;

}

.modalPanel {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}

Vince Xu
Microsoft Online Community Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Re: Help - stuck with the "black box" ModalPopupExtender problem

08-29-2008, 10:13 AM

Contact

point Member
waxler
Member since 08-26-2008, 3:41 PM
Posts 2

Thanks Vince. I did not know about the drag and drop method. This fixed my problem. For some reason the CSS was working in design mode so I thought that was validating, but I guess not.

Page 1 of 1 (3 items)

RSS Available