469,613 Members | 2,114 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,613 developers. It's quick & easy.

ModalPopupExtender and DOCTYPE problem

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;
}
--
Regards
Hardy
Apr 23 '07 #1
0 3055

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by suzi167 | last post: by
1 post views Thread by Victor | last post: by
1 post views Thread by =?Utf-8?B?S3lsZSBNLiBCdXJucw==?= | last post: by
1 post views Thread by mistryman06 | last post: by
reply views Thread by Heron | last post: by
reply views Thread by kendalljones99 | last post: by
reply views Thread by devrayhaan | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.