Modal Popup in PageLoad

In this Blog 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 below steps:

1. As we all know the primary control to be used whenever we use .NET Ajax control. Yes you have guessed it right it's not other than ScriptManager control. Add this to the form

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

2. Next we need ModalPopUp extender control

<asp:ModalPopupExtender runat="server" ID="myExtender" BackgroundCssClass="myModalPopupbackGrnd"

PopupControlID="myPopup" TargetControlID="myhiddencontrol">
</asp:ModalPopupExtender>

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 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

3 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</asp:Panel>

This is a demo popup extender

</div>

<asp:Button ID="btnOK" runat="server" Text="Thanks!" />

</div>

</asp:Panel>

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

4. To make our popup to be drag 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" />

5. 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;
}

6. 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;

}

7. Let's get into server side code, to bind JS function with button click event need to use below code

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

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

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

else
myExtender.Hide();

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

Happy Kooding… Hope this helps!