Question

I am using a asp.net ajax modal pop extender to show the modal overlay. it is working as expected, the problem i am facing is it is setting the background to black in IE 8 rather than the transparent one. it works fine FF and Chrome.

Markup.

 <cc1:ModalPopupExtender ID="mpError" runat="server" PopupControlID="pnlError" TargetControlID="btn"
            CancelControlID="ancClose" BackgroundCssClass="modalBackground">
        </cc1:ModalPopupExtender>
        <asp:Panel ID="pnlError" runat="server" CssClass="modalPopup" align="center" Style="display: none">
            <div class="dvPopup">
                &nbsp;&nbsp; <a id="ancClose" style="float: left; cursor: pointer; margin: 10px 0 0 10px;">
                    <img alt="Close" src="Images/x_button.png" /></a>
                <br />
                <br />
                <span class="spanPop">You can only vote once!</span>
            </div>
        </asp:Panel>

Css classes.

 .modalBackground
        {
            background-color: #d2d2d2;
            filter: alpha(opacity=60%);
            opacity: 0.8;
        }
        .modalPopup
        {
            padding-top: 10px;
            padding-left: 10px;
            width: 486px;
            height: 215px;
        }



      .dvPopup
        {
            background-image: url('images/error2_window.png');
            width: 486px;
            height: 215px;
        }

There is some problem with opacity in IE8 , but don’t the work arounds. Any suggestions, Css hacks will work .

Answer 1

Resolve this by changing in modal background class.

  filter: alpha(opacity=50);
            opacity: 0.5;