Image Popup In ASP.NET Using AJAXControlToolkit ModalPopupExtender

So, let’s start. First, install the latest AJAXControlToolkit for Visual Studio. My article here will help you with that. This installs the AJAXControlToolkit for all versions of Visual Studio.

Now, let’s create an empty website (or website project) in Visual Studio targeting the .NET framework 4.0 or above (I am using Visual Studio 2013). Let’s name the website. I named it “ImagePopUp”. In the project, let’s add a folder “Images”. In that folder, let’s put a few images which we will show as popups. Now, add a WebForm to the project. In the head section of the WebForm, let’s add some CSS.

<style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        .modalBackground
        {
            background-color: Black;
            filter: alpha(opacity=90);
            opacity: 0.8;
        }
        .modalPopup
        {
            background-color: #fff;
            border: 3px solid #ccc;
            padding: 10px;
            width: 1000px;
        }
    </style>

This stylesheet will be used to show the background and foreground of the popup. In the body of the WebForm, let’s add an Image button (this will show the images which will popup when we click on it). The code for image button is given below.

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/nature1.jpg" Width="300px" Height="100px" />

I have set the ImageUrl to one of the images in my Images folder and set the width and height.

Now, let’s add a panel to your WebForm and in the panel, let’s add and HTML image and ASP.NET image button. The code for panel looks like this.

<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" Style="display: none">
            <img src="Images/nature1.jpg" width="800" height="400" />
            <div style="text-align:center;">
            <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/Images/x.png" Width="25px" />
                </div>
        </asp:Panel>

The panel will be displayed as popup. Let’s set the CSS Class as “modalPopup”(the CSS we declared earlier in the head section). The HTML image will be shown in the popup panel and the Image Button in the panel will be used to close the popup. Now, let’s drag and drop a ModalPopUpExtender from AjaxControlToolkit tab in the tool box on your WebForm.

You will see that AjaxControlToolit.dll is added to your project.

Now, set the PopupControlID as “panel1”, TargetControlID as “ImageButton1”, CancelControlID as “ImageButton2” and BackgroundCssClass as “modalBackground”(the CSS we declared earlier in the head section). Let’s add some animation for popup. I have added fadein-fadeout animation. My code for ModalPopupExtender looks like below.

<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel1" TargetControlID="ImageButton1"
             CancelControlID="ImageButton2" BackgroundCssClass="modalBackground" >
             <Animations>
                <OnShowing>
                <FadeIn Duration=".5" Fps="30" />
            </OnShowing>
            <OnShown>
                <FadeIn Duration=".5" Fps="30" />
            </OnShown>

            <OnHiding>
                <FadeOut Duration=".5" Fps="30" />
            </OnHiding>
            <OnHidden>
                <FadeOut Duration=".5" Fps="30" />
            </OnHidden>

            </Animations>
        </ajaxToolkit:ModalPopupExtender>

Now, repeat the above steps for any other images you want to show. My code for the second image is as below.

<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender2" runat="server" PopupControlID="Panel2" TargetControlID="ImageButton3"
             CancelControlID="ImageButton4" BackgroundCssClass="modalBackground">
            <Animations>
                <OnShowing>
                <FadeIn Duration=".5" Fps="30" />
            </OnShowing>
            <OnShown>
                <FadeIn Duration=".5" Fps="30" />
            </OnShown>

            <OnHiding>
                <FadeOut Duration=".5" Fps="30" />
            </OnHiding>
            <OnHidden>
                <FadeOut Duration=".5" Fps="30" />
            </OnHidden>

            </Animations>
        </ajaxToolkit:ModalPopupExtender>
        <asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/Images/mature2.jpg" Width="300px" Height="100px" />
        <asp:Panel ID="Panel2" runat="server" CssClass="modalPopup" align="center" Style="display: none">
            <img src="Images/nature2.jpg" width="800" height="400" />
            <div style="text-align:center;">
            <asp:ImageButton ID="ImageButton4" runat="server" ImageUrl="~/Images/x.png" Width="25px" />
                </div>
        </asp:Panel>

Now, on the top of the form, let’s add script manager from Ajax Extender Tab in the toolbox. Now, run the program. You will see something like this.

Now, click on any of the images and you will get a popup with the image.

Click on the black “X” button at the bottom of the popup and it will close the popup.

Conclusion

So, we see that ModalPopupExtender is an important tool for showing the popup. You can use it to show popups of literally anything. Here, I have used it to show the popups of images.

That’s all for this article. Hope this article is useful.