Click here to Skip to main content
15,169,069 members
Articles / Web Development / ASP.NET
Posted 8 Nov 2011

Tagged as


4 bookmarked

Modal Popup in PageLoad

Rate me:
Please Sign up or sign in to vote.
4.75/5 (4 votes)
10 Nov 2011CPOL2 min read
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:
  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 none other than ScriptManager control. Add this to the form:
    <asp:ScriptManager ID="ScriptManager1" runat="server">

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

  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">
                <div style="padding: 3px;">
                    This is a demo popup extender
                <div style="width: 500px; text-align: right;">
                    <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() {
                return false;

  • Place the below code in Style tag inside head tag:
        background-color: #dedede;
        filter: alpha(opacity=50);
        opacity: 0.7;
        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)

  • Now execute and see it. Popup extender shows up for first time only & will not show when you refresh.
  • Happy coding… hope this helps!


    This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


    About the Author

    Comments and Discussions

    GeneralMy vote of 5 Pin
    Awadhesh Kumar Singh12-Sep-14 21:13
    MemberAwadhesh Kumar Singh12-Sep-14 21:13 
    QuestionModal Pop Up Pin
    code_shines21-Nov-13 20:10
    Membercode_shines21-Nov-13 20:10 
    AnswerRe: Modal Pop Up Pin
    Sam Pinizzotto21-Mar-14 10:53
    MemberSam Pinizzotto21-Mar-14 10:53 
    GeneralMy vote of 4 Pin
    Member 1023458218-Sep-13 20:54
    MemberMember 1023458218-Sep-13 20:54 
    GeneralAlready as an article: <a href=" Pin
    Wendelius23-Nov-11 10:33
    mveWendelius23-Nov-11 10:33 

    General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

    Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.