We take pride in your success. We let our positivity drive us, day in and out. Talk to us at Mindfire to know us more.

Software Technology Tips

Applying rounded corner to modal popup panel may look nice on the UI but it also causes issues such as the content of he panel is lost even if we can see a modal popup panel with rounded corners.

The workaround to solve this issue is described in following steps :

- Take two panel, one outer panel and another inner panel.

- Set the PopupControlId property of the ModalPopupExtender to the outer panel's Id.

- Set the TargetControlId property of the RoundedCornerExtender to the inner panel's Id.

- Make the Backcolor property of the outer panel as - Transparent.

The following code snippet describes how to use a ModalPopupExtender with a RoundedCornerExtender :

<asp:Button ID="btnClick" runat="server" Text="Click"></asp:Button>
<asp:Panel ID="pnlOuter" runat="server" BackColor="Transparent" style="display:none;">
    <asp:Panel ID="pnlInner" runat="server" BackColor="white" Width="310px">
        <table style="width: 100%" >
            <tr>
                <td>
                    <asp:Label ID="lblText" runat="server" Text="Hello World!"></asp:Label>
                    <asp:Button ID="btnOk" runat="server" Text="Ok" />
                </td>
            </tr>
       </table>
    </asp:Panel>
</asp:Panel>
<cc1:ModalPopupExtender ID="ModalPopupExtender1"

runat="server"

TargetControlID="btnClick"

PopupControlID="pnlOuter"

CancelControlID="btnOk"
BackgroundCssClass="modalPopupBackgroundStyle"

Enabled="True">
</cc1:ModalPopupExtender>
<cc1:RoundedCornersExtender ID="RoundedCornersExtender1"

runat="server"
TargetControlID="pnlInner"

BorderColor="black"

Radius="6"

Corners="All">
</cc1:RoundedCornersExtender>

Hope you find it useful.

Related Tags:
ASP.NET, RoundedCornerExtender, ModalPopupExtender

Author: Shantilaxmi Patro

ASP.NET

More Related Tips

Software Technology Tips

ASP.NET

Let us Connect!