Show AJAX Control Toolkit Modal Popup With JavaScript

JavaScript offers some functions that we can use to display modal popup boxes, such as alert() and confirm(). But in modern applications, this type of dialogs doesn’t have a place anymore. The technique of using HTML div to “simulate” a dialog is a very popular choice.

The ASP.NET AJAX Control Toolkit offers an extender that we can use to easily show popup boxes to the user. In another post I showed how to install ASP.NET AJAX Control Toolkit.

In the last post, we used alert() to let the user know that her session was about to expire. We’ll make a few changes to show an AJAX modal popup.

The ModalPopup Extender can be used to make a Panel visible when a button or a link is clicked. In this case, we want to use JavaScript to show and hide the Panel.

First, let’s add a ScriptManager, a ScriptManagerProxy, or a ToolkitScriptManager to the page.

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />

Add a Panel and a ModalPopupExtender to the page. We also need to add an hyperlink. It will not be visible to the user; it’s just used to fill the TargetControlID property of the extender.

<asp:Panel runat="server" ID="warningPopup" style="display: none;" CssClass="modalPopup">
    <div class="orderLabel">
        Your session is about to expire due to inactivity.
        <br /><br />
        <input id="btnWarningOK" type="button" value="OK" onclick="HideIddleWarning()" />
    </div>
</asp:Panel>
<asp:ModalPopupExtender ID="warningMPE" runat="server"
    TargetControlID="dummyLink" PopupControlID="warningPopup"
    BehaviorID="warningMPE" BackgroundCssClass="modalBackground" />
<asp:HyperLink ID="dummyLink" runat="server" NavigateUrl="#"></asp:HyperLink>

Also add the following CSS. You can add it to a .css file. For this post, we’ll put it in the page itself, inside style.

<style type="text/css">
    .modalBackground {
        background-color: #666;
        filter: alpha(opacity=70);
        opacity: 0.7px;
    }
    .modalPopup
    {
    	background-color: #fff;
    	border-width: 2px;
    	border-style: solid;
    	border-color: #000;
    	padding: 8px;
    	width: 300px;
    	text-align: center;
    }
</style>

When the popup is shown, there will be a div below that will fill the whole page. With the modalBackground class, we make that div semi transparent.

Now let’s add the JavaScript.

    <script type="text/javascript">

        //get a hold of the timers
        var iddleTimeoutWarning = null;
        var iddleTimeout = null;

        //this function will automatically be called by ASP.NET AJAX when page is loaded and partial postbacks complete
        function pageLoad() {

            //clear out any old timers from previous postbacks
            if (iddleTimeoutWarning != null)
                clearTimeout(iddleTimeoutWarning);
            if (iddleTimeout != null)
                clearTimeout(iddleTimeout);

            //read time from web.config
            var millisecTimeOutWarning = <%= int.Parse(System.Configuration.ConfigurationManager.AppSettings["SessionTimeoutWarning"]) * 60 * 1000 %>;
            var millisecTimeOut = <%= int.Parse(System.Configuration.ConfigurationManager.AppSettings["SessionTimeout"]) * 60 * 1000 %>;

            //set a timeout to display warning if user has been inactive
            iddleTimeoutWarning = setTimeout("DisplayIddleWarning()", millisecTimeOutWarning);
            iddleTimeout = setTimeout("TimeoutPage()", millisecTimeOut);
        }

        function TimeoutPage() {
            //refresh page for this sample, we could redirect to another page that has code to clear out session variables
            location.reload();
        }

        function DisplayIddleWarning() {
            $find('warningMPE').show();
        }

        function HideIddleWarning() {
            $find('warningMPE').hide();
        }

    </script>

We use the $find function to locate the extender and show it or hide it.

As in the last post, the minutes for each timer are read from the web.config. Add this to the web.config. We use only 1 and 2 minutes for each timer.

  <appSettings>
    <add key="SessionTimeout" value="2"/>
    <add key="SessionTimeoutWarning" value="1"/>
  </appSettings>

That’s all, run the web application. After a minute, you’ll see the popup.

Please leave your comments.