Modal Popup in PageLoad

Bangla Gopal Surya Prakash

4.75/5 (4 votes)

Nov 8, 2011

CPOL

2 min read

49586

Modal Popup in PageLoad

In this post, we will evaluate ASP.NET ModalPopUp Ajax extender control. Using this control, we will show ModalPopUp in pageload & this popup should be shown to user only once during the session, i.e., popup should not be shown when page is refreshed and should not be shown after returning back to this page before session expires. Let’s dig into this article by following the below steps:

As we all know, the primary control to be used whenever we use .NET Ajax control, yes you have guessed it right, it’s none other than ScriptManager control. Add this to the form:
```
<asp:ScriptManager ID="ScriptManager1" runat="server">
```
Next we need ModalPopUp extender control:
```
<asp:ModalPopupExtender runat="server" ID="myExtender" BackgroundCssClass="myModalPopupbackGrnd"
PopupControlID="myPopup" TargetControlID="myhiddencontrol">	
```
- myExtender: Modalpopup control ID
- myModalPopupbackGrnd: Background CSS name for entire page
- myPopup: Name of panel which will be shown as PopUp
- myhiddencontrol: Modalpopup extender expects target control ID. Based on this control, event extenders are executed. For example, if we want popup to be shown upon click event, these we need to give button control ID. But in our case, we want to show popup on page load, we will give label ID.

Now let’s add the panel which will be shown as popup:

<asp:Panel ID="myPopup" runat="server" CssClass="myModalPopup" Style="display: none;">
            <asp:Panel ID="dragHandler" runat="server">
                Welcome
            
                This is a demo popup extender
            
            
                <asp:Button ID="btnOK" runat="server" Text="Thanks!" />

In panel, we will place our content which is to be shown in popup.

dragHandler: Panel to show header & by selecting this, we can move popup.
btnOK: Button ok upon clicking, we will hide popup

To make our popup to be dragged, we need to add DragHandler & provide the DragHandler ID with the Panel ID which is inside PopUp panel:

<asp:DragPanelExtender ID="drgPnlExt" runat="server" TargetControlID="myPopup" DragHandleID="dragHandler" />

To hide popup when OK button is clicked, we will write a JS function inside head tag, which will do this for us:

function HideMyPopup() {
            $find('myExtender').hide();
            return false;
        }

Place the below code in Style tag inside head tag:

         .myModalPopupbackGrnd
        {
            background-color: #dedede;
            filter: alpha(opacity=50);
            opacity: 0.7;
        }
        
        .myModalPopup
        {
            min-width: 200px;
            min-height: 150px;
            background: white;
        }

Let’s get into server side code, to bind JS function with button click event, you need to use the below code:

btnOK.Attributes.Add("onclick", "return HideMyPopup();");

To show popup only on page load of the page, we need to use the below code in PageLoad event:

        if (Session.IsNewSession)
            myExtender.Show();
        else
            myExtender.Hide();

Now execute and see it. Popup extender shows up for first time only & will not show when you refresh.

Happy coding… hope this helps!