# Monday, 29 June 2009
« Exporting embedded resources from the .N... | Main | Where to download the AJAX Control toolk... »

I’ve seen questions about this control over and over again on the forums and decided to write something about it. The most common questions seem to be these:

1) How to show the modalpopup from codebehind?

Quite an easy one. The control itself exposes a Show method. This can be called during a postback for example to show some informative message or to provide a fill in form for an enduser. The following code snippet show how to do it:

e Language="C#" AutoEventWireup="true" CodeBehind="ModalpopupShowFromCodeBehind.aspx.cs" Inherits="WebApplication35Tech.ModalPopupTesting.ModalpopupShowFromCodeBehind" %>
<%@ Register TagPrefix="act" Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Show a modalpopupextender from codebehind</title>
    <style type="text/css">

    .modalBackground {
        background-color:Gray;
        filter:alpha(opacity=70);
        opacity:0.7;
    }

    .modalPopup {
        background-color:#ffffdd;
        border-width:3px;
        border-style:solid;
        border-color:Gray;
        padding:3px;
        width:250px;
    }

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="Scriptmanager1" runat="server" />
        
        <asp:Panel ID="pnlOverlay" style="display:none;" runat="server" CssClass="modalPopup">
            Some informative message: Hello world!
        </asp:Panel>
        
        <asp:Button ID="Button1" Text="Click me" runat="server" 
            onclick="Button1_Click" />
        
        <act:ModalPopupExtender runat="server" ID="mpe" 
            PopupControlID="pnlOverlay" 
            BackgroundCssClass="modalBackground" 
            TargetControlID="pnlOverlay"></act:ModalPopupExtender>
    </div>
    </form>
</body>
</html>

And the codebehind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication35Tech.ModalPopupTesting
{
    public partial class ModalpopupShowFromCodeBehind : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            mpe.Show();
        }
    }
}

 

This little sample, once the button is clicked and a postback has occured, will lay a so called overlay over the content of the page and in the middle of the screen will show what’s inside pnlOverlay.
Notice that I put the style=”display:none;” in the panel markup. This was done to initially hide the content. Otherwise you get the behavior that the content of the overlay will show on rendering in the browser in the top left corner and then suddenly flashes to the center of the screen which is rather unwanted behavior.

2) How to show the modalpopup from script?

This seems to be a bit more tricky. The modalpopup extender control has an ID and most people seem to the think that this should be used in client script to show it. As many have found out this is incorrect. Besides the ID of an extender it also provides a BehaviorID. This is the one that can be used to for example show our modal popup or to set the value of a slider extender (also a part of the ASP.NET Ajax control toolkit).

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ModalpopupShowFromClientScriptWithjQuery.aspx.cs" Inherits="WebApplication35Tech.ModalPopupTesting.ModalpopupShowFromClientScriptWithjQuery" %>
<%@ Register TagPrefix="act" Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Show a modalpopupextender from client script</title>
    <style type="text/css">

    .modalBackground {
        background-color:Gray;
        filter:alpha(opacity=70);
        opacity:0.7;
    }

    .modalPopup {
        background-color:#ffffdd;
        border-width:3px;
        border-style:solid;
        border-color:Gray;
        padding:3px;
        width:250px;
    }

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
                <asp:ScriptManager ID="Scriptmanager1" runat="server" />
        
        <asp:Panel ID="pnlOverlay" style="display:none;" runat="server" CssClass="modalPopup">
            Some informative message: Hello world!
        </asp:Panel>
        
        <input type="button" id="MyButton" value="Click me" />
        
        <act:ModalPopupExtender runat="server" ID="mpe" 
            PopupControlID="pnlOverlay" 
            BackgroundCssClass="modalBackground" 
            TargetControlID="pnlOverlay"
            BehaviorID="mpeBehaviorID"></act:ModalPopupExtender>
    </div>
    </form>
    <script src="../scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript">

        window.onload = function() { $addHandler($get('MyButton'), 'click', showOverlay); }

        function showOverlay() {
            var bid = $find('mpeBehaviorID');
            bid.show();
        }
    
    </script>
</body>
</html>

 

For this sample I made use of the unobtrusive way of capturing a click event of a button. Here I use ASP.NET Ajax to wire up the click event of the button in the onload event of the page. but I could’ve also written the same with jQuery. Note that I’m then mixing 2 different javascript frameworks/libraries together! That little piece of script looks like this:

$(document).ready(function() {
    $('#MyButton').click(function() {
        var bid = $find('mpeBehaviorID');
        bid.show();
    });
});

Once the button is clicked the overlay will show itself.

3) How to reposition the modalpopup?

As we saw in the previous 2 samples the modalpopup shows itself in the center of the screen. Nice but sometimes you want to place it somewhere different. This can be done by using the setLocation function from ASP.NET Ajax. A sample will make it more clear:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ModalpopupChangeScreenPosition.aspx.cs" Inherits="WebApplication35Tech.ModalPopupTesting.ModalpopupChangeScreenPosition" %>
<%@ Register TagPrefix="act" Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Reposition a modalpopup</title>
    <style type="text/css">

    .modalBackground {
        background-color:Gray;
        filter:alpha(opacity=70);
        opacity:0.7;
    }

    .modalPopup {
        background-color:#ffffdd;
        border-width:3px;
        border-style:solid;
        border-color:Gray;
        padding:3px;
        width:250px;
    }

    </style>
    <script type="text/javascript">
    
        function pageLoad() {
            $addHandler($get('btn1'), 'click', reposition);
            $addHandler($get('link2'), 'click', showModalPopupViaClient);
        }
        function reposition(ev) {
            ev.preventDefault();
            var posP = Sys.UI.DomElement.getLocation($get('testLocation'));
            var posPnl = Sys.UI.DomElement.getLocation($get('Pnl3'));
            Sys.UI.DomElement.setLocation($get('Pnl3'), posPnl.x, posP.y);
        }
        function showModalPopupViaClient(ev) {
            if (ev !== undefined) {
                ev.preventDefault();
            }
            var modalPopupBehavior = $find('test');
            modalPopupBehavior.show();
            
            var posP = Sys.UI.DomElement.getLocation($get('link2'));
            var posPnl = Sys.UI.DomElement.getLocation($get('Pnl3'));
            
            Sys.UI.DomElement.setLocation($get('Pnl3'), posPnl.x, posP.y);
        }
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager runat="server" ID="sm"></asp:ScriptManager>
        <asp:Panel runat="server" ID="Pnl3">
            <asp:TextBox runat="server" ID="txtTest"></asp:TextBox><br />
            <asp:Button runat="server" ID="btn1" Text="Reposition" />
        </asp:Panel>
        <asp:LinkButton runat="server" ID="link1" Text="Click me..."></asp:LinkButton>
        
        <act:ModalPopupExtender runat="server" ID="modal1" PopupControlID="Pnl3"
            TargetControlID="link1" BackgroundCssClass="modalBackground" RepositionMode="None"
            Y="80" BehaviorID="test">
        </act:ModalPopupExtender>
        
        <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
        <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
        <p id="testLocation">test...</p>
        <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
        <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
        <input type="button" id="link2" value="Click me too..." />
    </div>
    </form>
</body>
</html>

Once rendered there’s a link at the top and a button on the bottom of the page. Either one can be clicked and because we wired up the event handlers (with the $addHandler shortcut provided by ASP.NET Ajax) the function showModalPopupViaClient gets called. This once again grabs the BehaviorID, mind the sample in point number 2. Once done it grabs several coordinates with the Sys.UI.DomElement.getLocation function call. Then it uses the x position of the panel that acts as the modalpopup and the y position of the button.

However we notice something strange here. When we click the button on the bottom we expect that the overlay is set to the bottom as well due to the x/y positioning. But when we click the link in the left top corner we would expect that it would center as we didn’t add a handler for that click right? This isn’t the case. The modalpopup becomes visible near the top. How is this done? Well, notice in the markup of the modalpopupextender the attribute Y=”80”. This is what makes it all happen. It’s our default position to show the modalpopup.

Once the popup has appeared we can simply click the button Reposition. The function reposition will get called and the modalpopup will reposition itself to the y position of the paragraph with id=testLocation.

 

Grz, Kris.

Tuesday, 07 July 2009 15:13:00 (GMT Daylight Time, UTC+01:00)
Thanks. Clear, Concise and with excellent examples.
jon
Comments are closed.