I remember when I tried to implement a Login control in a ModalPopup with one of the early release of what was called at that time Atlas and is now called ASP.NET AJAX. I had lots of difficulties and now it works like a charm.

This time I would like to have a Login control in an ASP.NET AJAX PopupControlExtender from the ASP.NET AJAX Control Toolkit.

<?xml:namespace prefix=”asp”?><asp:panel id=”loginPanel” style=”display: none” runat=”server”><asp:login id=”LoginCtrl” runat=”server” cssselectorclass=”THBLogin” failuretext=”Identifiant incorrect ! Essayez à nouveau…” loginbuttontext=”S’identifier” passwordlabeltext=”Mot de Passe” passwordrequirederrormessage=”Le mot de passe est requis.” remembermetext=”Se souvenir de moi la prochaine fois.” titletext=”S’identifier” usernamelabeltext=”Email” usernamerequirederrormessage=”L’email est requis.” createusertext=”S’enregistrer” createuserurl=”/Register.aspx” passwordrecoverytext=”Mot de passe oublié ?” passwordrecoveryurl=”/PasswordRecovery.aspx”></asp:login></asp:panel><?xml:namespace prefix=”ajaxToolkit”?><ajaxtoolkit:popupcontrolextender id=”PopEx” runat=”server” targetcontrolid=”loginHyperLink” popupcontrolid=”loginPanel” position=”Left”></ajaxtoolkit:popupcontrolextender>The implementation is really straight, a panel with a asp:Login in it:

<asp:Panel ID=”loginPanel” runat=”server” Style=”display: none”>
<asp:Login ID=”LoginCtrl” runat=”server”
FailureText=”Identifiant incorrect ! Essayez ? nouveau…”

<span style="color: rgb(255,0,0)">PasswordLabelText</span><span style="color: rgb(0,0,255)">="Mot de Passe"</span> 
<span style="color: rgb(255,0,0)">PasswordRequiredErrorMessage</span><span style="color: rgb(0,0,255)">="Le mot de passe est requis."

RememberMeText=”Se souvenir de moi la prochaine fois.”
UserNameRequiredErrorMessage=”L’email est requis.”
PasswordRecoveryText=”Mot de passe oubli? ?”
PasswordRecoveryUrl=”/PasswordRecovery.aspx” />

Then you had the PopupControlExtender:

<ajaxToolkit:PopupControlExtender ID=”PopEx” runat=”server”
Position=”Left” />

I also need a target control that will initiate the Popup display:

<asp:HyperLink ID=”loginHyperLink” runat=”server”>S’identifier</asp:HyperLink>

Till now nothing really special.

Then I wanted to add a close button to this Popup, so I a added a div closeLoginPanel with an embedded link:

<asp:Panel ID=”loginPanel” runat=”server” Style=”display: none”>
<div class=”closeLoginPanel”>
<a title=”Fermer”>X</a>
<asp:Login ID=”LoginCtrl” runat=”server”

This is not enough because I need to have the close action started when a user click on the link (X). I first looked at the javascript of the PopupControlExtender and saw that it handles the onclik of the body element so I added

<a onclick=”document.body.click(); return false;” title=”Fermer”>X</a>

This was working fine on Internet Explorer 7 but was raising an error on FireFox 2. Looking in more detail in the javascript I finally changed my code to:

<a onclick=”AjaxControlToolkit.PopupControlBehavior.__VisiblePopup.hidePopup(); return false;” title=”Fermer”>X</a>

This is working on both Internet Explorer and FireFox 2.

Here is the css I used:

font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 17px;
font-size: 11px;
font-weight: bold;

<span style="color: rgb(255,0,0)">position</span>: <span style="color: rgb(0,0,255)">absolute</span>;  
<span style="color: rgb(255,0,0)">top</span>:<span style="color: rgb(0,0,255)">8px</span>;  
<span style="color: rgb(255,0,0)">right</span>: <span style="color: rgb(0,0,255)">10px</span>;  


.closeLoginPanel a
background-color: #6699CC;
cursor: pointer;
color: #FFFFFF;
text-align: center;
text-decoration: none;
padding: 5px;

Here is the result: