Click here to Skip to main content
Click here to Skip to main content

Modal Popup in PageLoad

, 10 Nov 2011
Rate this:
Please Sign up or sign in to vote.
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">
                    Welcome
                <div style="padding: 3px;">
                    This is a demo popup extender
                </div>
                <div style="width: 500px; text-align: right;">
                    <asp:Button ID="btnOK" runat="server" Text="Thanks!" />
                </div> 
    
     
    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!

    License

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

    About the Author

    Bangla Gopal Surya Prakash
    Software Developer (Senior)
    United States United States
    B.Tech graduate in CSE, having experience in .Net related Technologies
     
    Microsoft Certified Technical Specialist in .NET Framework 2.0
    Microsoft Certified Technical Specialist in .NET Framework 4.0
     
    My interests are Coding, reading [technical stuff] and listening to music, playing Cricket, Table Tennis
     
    http://bgsuryablog.blogspot.com/

    Comments and Discussions

     
    QuestionModal Pop Up Pinmembercode_shines21-Nov-13 19:10 
    AnswerRe: Modal Pop Up PinmemberSam Pinizzotto21-Mar-14 9:53 
    GeneralMy vote of 4 PinmemberMember 1023458218-Sep-13 19:54 
    GeneralAlready as an article: <a href="http://www.codeproject.com/K... PinmvpMika Wendelius23-Nov-11 9:33 

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

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

    | Advertise | Privacy | Mobile
    Web02 | 2.8.140709.1 | Last Updated 10 Nov 2011
    Article Copyright 2011 by Bangla Gopal Surya Prakash
    Everything else Copyright © CodeProject, 1999-2014
    Terms of Service
    Layout: fixed | fluid