Ajax ModalPopup 在 IE8 中显示错误

Question

我在 IE8 上使用 modalPopup 控件时遇到问题。 需要弹出的面板已经弹出。

看起来像（在比 IE 8 更新的浏览器中），一行中有面板，当您单击其中一个时，会弹出一个窗口（使用 AJAX modalPopUp）

在 IE8 中，它显示弹出窗口（面板），甚至无需单击列表中的面板之一。

代码如下：

<asp:updatepanel id="UpdatePanel1" runat="server">
<contenttemplate>
<asp:panel id="PanelManufacturerPictures" runat="server" scrollbars="Auto" width="100%">
<asp:datalist id="DataListManufacturersPictures" runat="server" cellpadding="5" repeatdirection="Horizontal" repeatcolumns="11" showfooter="False" showheader="False" cellspacing="16">
<itemstyle height="75px" width="75px"/>
<itemtemplate>
    <asp:imagebutton id="ImageButtonManufacturerPicture" runat="server" alternatetext='<%# eval("manufacturername") %>' Height="100%" ImageUrl='<%# "~/elimansourwcf/manufacturerspictures/"+databinder.eval(container.dataitem, "imageurl") %>' ToolTip='<%# eval("manufacturername") %>' Width="100%" CausesValidation="False" /> <asp:roundedcornersextender id="RoundedCornersExtenderDetailsManufacturers" runat="server" targetcontrolid="PanelManufacturersDetails" radius="8" bordercolor="Red">
</asp:roundedcornersextender>
<asp:modalpopupextender id="ModalPopupExtenderManufacturerDetails" runat="server" popupcontrolid="PanelManufacturersDetails" targetcontrolid="ImageButtonManufacturerPicture" backgroundcssclass="modalBackgroundProducts" cancelcontrolid="ButtonManuCancel">
</asp:modalpopupextender>
<asp:panel id="PanelManufacturersDetails" runat="server" backcolor="White">
<div dir="rtl">
    <asp:label id="LabelManufacturerName" runat="server" font-bold="True" font-size="XX-Large"></asp:label>
    <div style="float: right;">
        <asp:table id="TableDetails" runat="server" cellpadding="15" font-bold="True" cellspacing="15">
        <asp:tablerow id="TableRow5" runat="server">
        <asp:tablecell id="TableCell8" runat="server" width="100px" horizontalalign="Left" columnspan="2">
        <asp:roundedcornersextender id="RoundedCornersExtenderDetailsManufacturerCancel" runat="server" targetcontrolid="ButtonManuCancel" radius="8">
        </asp:roundedcornersextender>
        <asp:button id="ButtonManuCancel" runat="server" text="צא מחלון זה" width="75px" causesvalidation="False" backcolor="Red" forecolor="White" font-bold="True"/>
        </asp:tablecell>
        </asp:tablerow>
        </asp:table>
    </div>
</div>
</asp:panel>
</itemtemplate>
</asp:datalist>
</asp:panel>
</contenttemplate>
</asp:updatepanel>

我看到一个帖子：

Ajax ModalPopup wrong display in IE8 - IE9 但我不明白把css“位置：绝对；”放在哪里

这是网站的网址：

www.emansour.co.il

感谢您的帮助

[编辑] 我注意到这个问题发生在我在有界数据控件中使用 modalPopup 时。

Answer 1

您的错误是由RoundedCornersExtender 之一引起的。出于某种原因，有时这些不能很好地嵌套在众多 Panels 控件和 UpdatePanels 中。我通过删除设置按钮样式的RoundedCornersExtender 解决了这个问题。删除此RoundedCornersExtender 控件，并在代码中添加以下css 类以使您的按钮具有圆角：

.rounded
{
    color: white;
    background-color: red;
    font-weight: bold;
    width: 75px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border: 0px none;
}

然后将样式应用到您的按钮：

<asp:Button ID="ButtonManuCancel" runat="server" Text="צא מחלון זה" Width="75px" CausesValidation="False" BackColor="Red" ForeColor="White" Font-Bold="True" CssClass="rounded" />

我离开了另一个 RoundedCornersExtender 并在 IE 上进行了测试，但没有收到错误消息。 AjaxToolkit 有时会非常有用，但有时可能会让人头疼。如果你想添加像这样的简单功能（简单的 css），我建议不要使用 ControlExtension 来完成这样一个简单的事情。对于更复杂的东西，我会使用 Ajax.net 控件，或者完全避免使用它。