0

我正在尝试使用 Ajaxtoolkit 的 modalpopupextender 创建一个模式弹出窗口，它就像一个魅力。

当弹出窗口显示时，我想将页面变灰，并通过分配 popuppanel 的 modalPopup css 类来做到这一点：

<style type="text/css">
    .modalPopup {
        background-color: gray;
        filter: alpha(opacity=70);
        opacity: 0.7;
    }

    .modalDiv {
        background-color:white;
        height:200px;
        width:400px;
        margin-left:auto;
        margin-right:auto;
        margin-top:200px;
    }
</style>

背景是灰色的，但现在我无法使弹出窗口中的控件再次变为实体。我尝试将它们放在一个 div 中，并为 div 分配另一个 css 类，在其中我将不透明度设置为 0 和 100，但这没有区别。

我的弹出面板是这样的：

 <asp:Panel ID="ModalPanel" runat="server" Width="100%" Height="100%" CssClass="modalPopup">
    <div class="modalDiv">
        writesomething:
        <asp:TextBox runat="server" ID="txtModalBox" /><br />

        <asp:Button Text="Ok" ID="btnModalOK" OnClick="btnModalOK_Click" runat="server" />
        <asp:Button Text="Annuller" ID="btnModalAnnuller" OnClick="btnModalAnnuller_Click" runat="server" /><br />
    </div>
</asp:Panel>

所以我的问题是，我如何在具有透明背景的面板内有一个不透明的 div ？

4

2 回答 2

2

使用时，您不能有一个比其父级更不透明的子级，opacity您应该使用 alpha 透明度值，rgba(0,0,0,0)以便透明度不会“继承”

唯一的缺点是IE 9 以下rgba()不支持

于 2013-04-16T13:12:34.023 回答
1

如果您想在 9 之前的 IE 版本中使用 rgba，我会提供一个替代方案，但是，就我个人而言，我不喜欢过度使用它。

http://css3pie.com/documentation/supported-css3-features/

上面的链接将带您进入 CSS3 PIE 项目。在您的站点中使用它的说明非常简单，但简而言之，它允许非 CSS3 兼容的浏览器呈现某些 CSS3 功能（rgba 是这些功能之一，更不用说边框半径，这是另一个不错的功能） .

以我的经验： 一旦用户拉起页面，渲染功能确实需要几分之一秒（大部分时间），但对我来说，当我使用它时，这并不是一个真正的问题，因为它最终看起来就像他们的浏览器仍在加载页面，因为用户习惯于使用旧版浏览器。

希望这可以帮助那些发现自己需要 rgba 但必须与 IE8（或其他）完全兼容的人，因为我知道这正是发生在我身上的事情，而且据我所知，这是唯一可用的解决方案。

于 2013-04-16T14:44:54.013 回答