ASP.NET AJAX Control Toolkit の ModalPopup の背景が IE11以降 で透明になってしまった

 

IE10までは ModalPopup の背景が意図したように黒になっていた。

しかし、IE11以降では ModalPopup の背景が意図せず透明になっていた。

 

何の根拠もなしに、IE11以降の問題か？と自分の都合のいいように片づけて、IE9モードで動作させるようにしていた。

Site.master

<meta http-equiv="X-UA-Compatible" content="IE=9" />

しかし、IE11以降の問題ではなく、CSSでの定義ミスだった。.modalPopup の background-color をコメントアウトしていた。

Site.css

/*Modal Popup*/
.modalBackground {
    background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.7;
}

.modalPopup {
    /*background-color:#000000;*/
    border-width:4px;
    border-style:solid;
    border-color:#008080;
    padding:3px;
    width:500px;
}

DetailForm8.aspx

<asp:Panel ID="AnimatedModalPopupPanelDB" runat="server" BorderStyle="Solid" Height="4000px"
     Width="1500px" CssClass="modalPopup" ScrollBars="Auto">
    <table style="height: 100%; width: 100%">
        <tr>
            <td style="text-align: left; vertical-align: top" valign="top">

                <asp:FormView ID="FormViewTMDbDB" runat="server" DataKeyNames="ID" DataSourceID="SDSTMDbMovieDB">
                    <EditItemTemplate>
                        ID:
                        <asp:Label ID="IDLabel1" runat="server" Text='<%# Eval("ID") %>' />
                        <br />

DetailForm8.aspx

<asp:Button ID="OpenButtonDB" runat="server" CssClass="ButtonLarge" Text="TMDbInfomation" Enabled="False" />
<asp:ModalPopupExtender ID="OpenButtonDB_ModalPopupExtender" runat="server" BackgroundCssClass="modalBackground" CancelControlID="CloseButtonDB" Enabled="True" PopupControlID="AnimatedModalPopupPanelDB" TargetControlID="OpenButtonDB">
    <Animations>
                <OnShowing>
                    <Sequence>
                        <StyleAction AnimationTarget="CloseButton" Attribute="display" Value="none" />
                        <Resize Duration="0" Height="150px" Width="300px" />
                    </Sequence>
                </OnShowing>
                <OnShown>
                    <Sequence>
                        <Parallel>
                            <FadeIn />
                            <Scale ScaleFactor="5" Center="True" />
                        </Parallel>
                        <StyleAction AnimationTarget="CloseButton" Attribute="display" Value="" />
                    </Sequence>
                    </OnShown>
                <OnHiding>
                                                <Sequence>
                        <StyleAction AnimationTarget="CloseButton" Attribute="display" Value="none" />
                        <Parallel>
                            <FadeOut />
                            <Scale ScaleFactor="5" Center="True" />
                        </Parallel>
                    </Sequence>
                            </OnHiding>
        </Animations>
</asp:ModalPopupExtender>

 

TMDbInformation をクリックすると、映画の詳細情報が ModalPopup で表示されるが、ModalPopup の背景が透明になってしまった。IE9 までは .modalPopup の background-color をコメントアウトしていても、ModalPopup の背景が透明になることはなかったが、IE11では正しく解釈され、正しい動きとして ModalPopup の背景が透明になったのだと思う。

単なる自分のミスだった・・・・・

 

↓

↓

IE11でIE9モードで表示、背景は黒。

IE11でIE10モードで表示、背景は黒。

IE11でedgeモードで表示、背景が透明になってしまう。

 

 

修正作業

IEを最新モードで動作させるように変更した。

Code Snippet

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

CSSの .modalPopup の background-color をコメントアウトを外した。

Site.css

/*Modal Popup*/
.modalBackground {
    background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.7;
}

.modalPopup {
    background-color:#000000;
    border-width:4px;
    border-style:solid;
    border-color:#008080;
    padding:3px;
    width:500px;
}

 

結果、正しく、ModalPopup の背景が黒になった。

↓

↓

 

最近知った CSS3 だけで ModalPopup できるらしいけど、縦方向のスクロールバーを出せるのかどうかわからないので、このまま AJAX Contorl Toolkit の ModalPopup を使わせていただきます。