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
anel 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>
<aspropDownList ID="drStandardCode" runat="server"></aspropDownList>
<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>
</aspanel>
</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: progidXImageTransform.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;
}
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
anel 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
ropDownList ID="drStandardCode" runat="server"></aspropDownList><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
anel></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
XImageTransform.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;
}