Login control in an ASP.NET AJAX toolkit PopupControlExtender with a close button--write by Laurent Kempé
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.
<asp:Panel ID="loginPanel" runat="server" Style="display: none"> <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:Panel>
Then you had the PopupControlExtender:
<ajaxToolkit:PopupControlExtender ID="PopEx" runat="server"
TargetControlID="loginHyperLink"
PopupControlID="loginPanel"
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> </div> <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:
.closeLoginPanel
{
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 17px;
font-size: 11px;
font-weight: bold;
position: absolute;
top:8px;
right: 10px;
}
.closeLoginPanel a
{
background-color: #6699CC;
cursor: pointer;
color: #FFFFFF;
text-align: center;
text-decoration: none;
padding: 5px;
}
Here is the result:
posted on 2007-06-20 10:14 qianhuajuan 阅读(989) 评论(1) 编辑 收藏 举报