ModalPopupExtender and DOCTYPE problem

G

Guest

Hi all,

I have a web form, and I want to use ModalPopupExtender from Ajax Toolkit.

I am using IE 7.0 as browser, VS 2005 and Ajax and Ajax Tool Kit installed.
Windows XP Pro.

Now I have a very strange problem. With 2nd line of code (DOCTYPE), I can
popup modal dialog in middle of screen, BUT all my styles are lost, including
modal popup is ugly. If I remove DOCTYPE I can see all my styles, BUT modal
dialoge box will popup at top-left corner of page and it will be cut to some
extent.

Does it mean ModalPopupExtender relies on DOCTYPE to display. BUT why my
styles are not availabe with DOCTYPE??? Is there a way I can control display
position of ModalPopupExtender?

Thanks for any suggestion.

Following is my source code, no code behind.

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

<!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>Untitled Page</title>
<link href="style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" language="javascript"
src="scripts/client.js"></script>
<script type="text/javascript" language="javascript"
src="scripts/dom-drag.js"></script>
<link title="win2k-cold-1" media="all"
href="DatePicker/skins/aqua/theme.css" type="text/css"
rel="stylesheet"/>
<script src="DatePicker/calendar.js" type="text/javascript"></script>
<script src="DatePicker/calendar-setup.js" type="text/javascript"></script>
<script src="DatePicker/lang/calendar-en.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<table cellspacing="0" cellpadding="0" width="95%" border="0">
<tr>
<td class="MainHeading">Page</td>
</tr>
</table>
<asp:ScriptManager ID="ScriptManagerMain" runat="server">
<Services>
<asp:ServiceReference path="Services/ClientCallBack.asmx" />
</Services>
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanelVehicles" runat="server"><ContentTemplate>
<ajaxToolKit:ModalPopupExtender ID="mpeDeleteEnrollment" runat="server"
TargetControlID="btnDummy"
PopupControlID="pDelete"
CancelControlID="btnCancel"
BackgroundCssClass="modalBackground"
DropShadow="true">
</ajaxToolKit:ModalPopupExtender>

<asp:Button ID="btnDummy" Text="A" runat="server" />
<asp:panel id="pDelete" runat="server" CssClass="modalBox" Style="display:
none;">
<table border="0" cellpadding="4" cellspacing="0" width="400">
<tr class="DetailApplet">
<td class="MainHeading"><asp:Localize ID="llDeleteHeader"
runat="server">Delete Enrollment</asp:Localize></td>
</tr>
<tr class="DetailApplet">
<td class="SectionTitle"><asp:Localize ID="llStandardCode"
runat="server">Reason</asp:Localize> </td>
<td>
<asp:DropDownList ID="drStandardCode" runat="server"></asp:DropDownList>
<asp:RequiredFieldValidator ID="reqStandardCode"
ControlToValidate="drStandardCode"
EnableClientScript="false" CssClass="ErrorMessage" runat="server"
ValidationGroup="DeleteEnrollment"
ErrorMessage="<br>Please select a reason to delete enrollment.">
</asp:RequiredFieldValidator>
</td>
</tr>
<tr class="DetailApplet">
<td colspan="2" align="right">
<asp:Button ID="btnDeleteEnrollment" runat="server" CssClass="ButtonStyle"
ValidationGroup="DeleteEnrollment" Text="Delete" />
<asp:Button ID="btnCancel" Text="Cancel" CssClass="ButtonStyle"
CausesValidation="false" runat="server" />
</td>
</tr>
</table>
</asp:panel>
</ContentTemplate></asp:UpdatePanel>
</form>
</body>
</html>
--------------------------------------------------------

here is my style.css
--------------------------------------------------------
BODY
{
margin-left:9;
}
input.ButtonStyle
{
font-weight: bold;
color: #303030;
font-family: Verdana,Arial,Tahoma;
border-right: #202020 1px solid;
border-top: #202020 1px solid;
border-left: #202020 1px solid;
border-bottom: #202020 1px solid;
font-size:xx-small;
filter: progid:DXImageTransform.Microsoft.Gradient
(GradientType=0,StartColorStr= '#909090',EndColorStr='#C0C0C0' );
cursor: hand;
padding-left: 10;
padding-right: 10;
}
..MainHeading
{
font-size: 18px;
color: #0D3556;
font-family: Verdana,Arial;
background-color: #FFFFFF;
font-weight: bolder;
}
..SectionTitle
{
font-weight: normal;
font-size: 9pt;
color: black;
font-family: Arial, Verdana;
text-align:right;
vertical-align:top
}
..DetailApplet
{
font-family: Arial, Verdana;
background-color: #EEEEEE;
font-size:8pt;
vertical-align:top;
}
..modalBackground {
background-color: Gray;
filter: alpha(opacity=50);
opacity: 0.5;
}
..modalBox
{
background-color: #f5f5f5;
padding: 3px;
border-right: black 2px solid;
border-top: black 2px solid;
border-left: black 2px solid;
border-bottom: black 2px solid;
}
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,928
Messages
2,570,068
Members
46,513
Latest member
JacklynMcC

Latest Threads

Top