我有一个 ajax modalpopupextender,它会在发生错误时打开一个弹出窗口。这在我迄今为止测试过的所有浏览器中都可以正常工作。但不是在 Internet Explorer 7 中(它在 ie 8 和 9 中)
基本上没有应用面板的高度。在屏幕上它大约 20 像素高。我不知道为什么,并且已经使用了几个小时的各种样本无济于事。宽度 os 工作正常。任何帮助感谢达摩
HTML
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="myapp.Logon" %>
<!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">
<link href="assets/css/Logon.css" rel="stylesheet" type="text/css" />
<link href="assets/css/modalBackground.css" rel="stylesheet" type="text/css" />
<title>myapp Login</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtenderError" runat="server"
TargetControlID="PanelLogonDetails">
</ajaxToolkit:RoundedCornersExtender>
<asp:Panel ID="PanelLogonDetails" runat="server" Width="350" Height="300" BorderColor="White" BackColor="White">
<div id="container">
<asp:Label ID="LabelLogo" runat="server" Text="Logo"></asp:Label>
<br />
<div id="inputcontainer">
<asp:Label ID="lblUsername" runat="server" Text="Username"></asp:Label>
<br />
<asp:TextBox CssClass="Textbox" ID="txtUserName" runat="server" Text="Administrator"
ToolTip="Username" Width="200px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorUsername" runat="server" ErrorMessage="You must enter a Username"
ControlToValidate="txtUserName" ForeColor="White"></asp:RequiredFieldValidator>
<br />
<asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label>
<br />
<!-- TextMode set to singleline for testing - set to Password for production-->
<asp:TextBox CssClass="Textbox" ID="txtPassword" runat="server" Text="!password£$nmj5%$-12"
ToolTip="Password" TextMode="SingleLine" Width="200px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorPassword" runat="server" ErrorMessage="You must enter a password"
ControlToValidate="txtPassword" ForeColor="White"></asp:RequiredFieldValidator>
<br />
<br />
<asp:Button CssClass="Button" ID="btnLogin" runat="server" Text="Login" OnClick="btnLogin_Click" />
<br />
<br />
</div>
</div>
</asp:Panel>
<!-- Error Modal Form -->
<asp:HiddenField ID="hideForModal" runat="server" />
<ajaxToolkit:ModalPopupExtender runat="server" ID="ErrorModal" BehaviorID="modalPopupExtenderError"
TargetControlID="hideForModal" PopupDragHandleControlID="popUpPaneError" PopupControlID="popUpPaneError"
OkControlID="btnOk" BackgroundCssClass="modalBackground" DropShadow="False" Drag="true">
</ajaxToolkit:ModalPopupExtender>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="popUpPaneError">
</ajaxToolkit:RoundedCornersExtender>
<asp:Panel ID="popUpPaneError" runat="server" CssClass="confirm-dialog" Width="485" Height="285" BackColor="White">
<div id="ErrorInputContainer">
<div>
<b>Error Code:</b></div>
<asp:Label ID="lblErrorCode" runat="server" Text="Error Code"></asp:Label>
<div>
<b>Error Message:</b></div>
<asp:Label ID="lblErrorMessage" runat="server" Text="Error Message"></asp:Label>
<div>
<b>Ex message:</b></div>
<asp:Label ID="lblExMessage" runat="server" Text="Ex Message"></asp:Label>
<br />
<asp:Button ID="btnOk" runat="server" Text="Ok" CssClass="Button" />
<br />
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="close" OnClientClick="$find('modalPopupExtenderError').hide(); return false;" />
</div>
</asp:Panel>
<!-- End Error Modal Form -->
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
登录.css
#PanelLogonDetails
{
background-color:#FFFFFF;
width: 350px;
height: 300px;
position:absolute;
left: 40%;
top: 40%;
margin-left: -50px;
margin-top: -50px;
}
/* main div */
#container
{
padding-left:50px;
padding-top:20px;
}
#LabelLogo
{
font-family: Arial, Sans-Serif;
font-size: 20px;
font-weight: bold;
}
/* end main div */
/* inputcontainer (within the main div above) */
#inputcontainer {
position:absolute;
height:100px;
width:230px;
left: 35%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
/* End inputcntainer */
html,body {
margin:0px;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
font-size:13px;
line-height:1.5em;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003366', endColorstr='#FFFFFF'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#036), to(#FFF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #036, #FFF); /* for firefox 3.6+ */
height: 100%;
}
/* Error Modal */
#ErrorInputContainer
{
background-color:White;
background:white;
position:absolute;
height:260px;
width:460px;
top:20px;
left:20px;
color:Black;
}
#popUpPaneError
{
height:260px;
width:460px;
}
/* End Error Modal */
/* TextBox */
.Textbox
{
width:auto;
padding:2px;
color:Black;
text-align:left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
font-size: 10pt;
font-family: Arial;
}
.Textbox:focus
{
background-color:#FFCC33;
}
/* End TextBox */
/* Button */
.Button
{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
text-align:left;
padding-left:22px;
background-repeat: no-repeat;
background-image: url(/assets/img/action.gif);
background-position:3px 50%
}
.Button:hover
{
background: #FFCC33;
background-repeat: no-repeat;
background-image: url(/assets/img/action.gif);
background-position:3px 50%
}
/* End Button */
modalBackground.css
.modalBackground
{
background-color:#696969;
filter: alpha(opacity=60);
opacity: 0.6;
}
.close {
DISPLAY: block;BACKGROUND: url(img/close.png) no-repeat 0px 0px;
LEFT: -5px;WIDTH: 26px;TEXT-INDENT: -1000em;POSITION: absolute;
TOP: -7px;HEIGHT: 26px;
}
.modalBackground {
background-color:Gray;filter:alpha(opacity=70);opacity:0.7;
}