I want to implement a modal popup using the Ajaxtoolkit's modalpopupextender, and so far it's working perfectly.
While the popup is displayed, I need to dim out the rest of the page. To achieve this, I applied the modalPopup CSS class to the popuppanel:
<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>
The background is dimmed, but now my issue is that the controls inside the popup are not fully opaque again. I tried wrapping them in a div and applying another CSS class with opacity set to both 0 and 1, but it didn't work.
This is how my popup panel looks like:
<asp:Panel ID="ModalPanel" runat="server" Width="100%" Height="100%" CssClass="modalPopup">
<div class="modalDiv">
Write something:
<asp:TextBox runat="server" ID="txtModalBox" /><br />
<asp:Button Text="Ok" ID="btnModalOK" OnClick="btnModalOK_Click" runat="server" />
<asp:Button Text="Cancel" ID="btnModalCancel" OnClick="btnModalCancel_Click" runat="server" /><br />
</div>
</asp:Panel>
So my question is, how can I have non-transparent content inside a panel with a transparent background?