Dotnet with Naveen: Modal PopUp with Yes/No Options

Recently, I faced an issue while implementing ModalPopup in my project. As per project requirements. I want to show confirmation with Yes/ No options instead of Ok / Cancel. So, I go with Ajax ModalPopUpExtender control, but after using when I give Yes Page gets postback. But as per requirement we don't want postback. In this article I'm trying to explain how to show popup with Yes/ No confirmation and when I press Yes/ No / close how to avoid postback.

Background

Recently, I faced an issue while implementing ModalPopup in my project. As per project requirements. I want to show confirmation with Yes/ No options instead of Ok / Cancel.

So, I go with Ajax ModalPopUpExtender control, but after using when I give Yes Page gets postback. But as per requirement we don't want postback.

In this article I'm trying to explain how to show popup with Yes/ No confirmation and when I press Yes/ No / close how to avoid postback.

Abstract

In this article I'm trying to explain how to work with ModalPopUpExtender. For this you must download the latest version of AjaxControlToolkit.dll and add Reference to the project.

Description

The ModalPopup extender allows a page to display content to the user in a "modal" manner which prevents the user from interacting with the rest of the page. The modal content can be any hierarchy of controls and is displayed above a background that can have a custom style applied to it.

Properties

TargetControlID - ID of the element that activates the modal popup.

PopupControlID - Id of the element to display as a modal popup.

CancelControlID - ID of the element that cancels the modal popup, but in my example I'm not using CancelControlID, I handle cancel action using Javascript function.

BackgroundCssClass - This is the property to set the back ground color while modal is appear in the screen.

Source Code

Following code-snippet is of designing of our aspx page:

<style type="text/css">

.modalBackground
    {
        background-color: Black;
        filter: alpha(opacity=90);
        opacity: 0.8;
    }
</style>

<script type="text/javascript">
function closepopup() {
        $("#<%=pnlPopup.ClientID %>").hide();
        $(".modalBackground").hide();
    }

</script>

</head><body>    <form id="form1" runat="server">    <div align="center">        <span class="style1"><strong>Ajax Modal PopUp</strong></span><br />        <br />
<asp:Button ID="btnShowPopup" Text="Show Popup" runat="server" Style="display: none" />
<cc1:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btnShowPopup"
    PopupControlID="pnlPopup" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" BackColor="White" Height="100px"
    Width="400px" Style="display: none">
    <table width="100%" style="border: Solid 2px #D46900; width: 100%; height: 100%"
        cellpadding="0" cellspacing="0">
        <tr style="background-image: url(~/Images/header.gif)">
            <td style="height: 10%; color: White; font-weight: bold; padding: 3px; font-size: larger;
                font-family: Calibri" align="left">
                Confirm Box
            </td>
            <td style="color: White; font-weight: bold; padding: 3px; font-size: larger" align="right">
                <a href="javascript:void(0)" onclick="closepopup()">
                    <img src="~/Images/Close.gif" style="border: 0px" align="right" /></a>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="left" style="padding: 5px; font-family: Calibri; font-size: 12px;">
                <asp:Label ID="lblCancelText" runat="server" Text="Are you sure you want to cancel?"></asp:Label>
            </td>
        </tr>
        <tr>
            <td colspan="2">
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td align="right" style="padding-right: 15px">
                <asp:UpdatePanel ID="upCancel" runat="server" UpdateMode="Always">
                    <ContentTemplate>
                        <asp:ImageButton ID="btnCancelYes" OnClick="btnCancelYes_Click" runat="server"
                            ImageUrl="~/Images/btnyes.jpg" />
                        <a href="javascript:void(0)" onclick="closepopup()">
                            <img src="~/Images/btnNo.jpg" style="border: 0px" align="right" /></a>
                                            </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="btnCancelYes" EventName="Click" />
                    </Triggers>
                </asp:UpdatePanel>
            </td>
        </tr>
    </table>
</asp:Panel>
        </div>    </form></body></html>

Code Behind

Following code-snippet is from our aspx page code behind:

protected void btnCancelBriefYes_Click(object sender, EventArgs e)
{
        mpe.Hide();
}

Output:

ScriptManager:

<ajaxToolkit:ToolkitScriptManager EnablePartialRendering="true" runat="Server" ID="ScriptManager1" />

We need to include the above line under div tag, otherwise we will get the below exception.

Conclusion

Hope this article will helpful to some one those who are looking for the same.

Dotnet with Naveen

About Me

Thursday, 19 November 2015

Modal PopUp with Yes/No Options