Modal login
Has anyone been able to get a model dialog with postback to work with Sitefinity 4. I'm trying to implement a modal login and have not been able to find examples of how this is done. I've implemented a custom login widget with and update panel to host the login form, however, it doesn't seem to be behaving properly in Sitefinity so, I don't know if I'm doing something wrong.
Any help would be appreciated.
Here's what i got so far
--- Login.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Login.ascx.cs" Inherits="Nutreco.Controls.Login" %><%@ Register TagPrefix="act" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit, Version=3.0.20820.16598, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e" %><asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server"></asp:ScriptManagerProxy><asp:LoginStatus ID="LoginStatus1" runat="server" LoginText="Sign In" LogoutText="Sign Out" OnLoggingOut="OnSignOut" /><act:ModalPopupExtender ID="LoginStatus1_ModalPopupExtender" runat="server" BackgroundCssClass="modalBackground" PopupControlID="Panel1" TargetControlID="LoginStatus1"></act:ModalPopupExtender><act:AnimationExtender ID="openAnimation" runat="server" TargetControlID="LoginStatus1"> <Animations> <OnClick> <Parallel AnimationTarget="Panel1" Duration=".7" Fps="25"> <FadeIn /> </Parallel> </OnClick> </Animations></act:AnimationExtender> <asp:Panel ID="Panel1" runat="server" CssClass="lightbox" Style="display: none"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <div class="holder"> <asp:LinkButton ID="lnkClose" runat="server" CssClass="close" OnClick="OnClose" /> <div class="sign-form"> <fieldset> <h3>Sign In</h3> <label for="text1">Please enter your Username and Pasword:</label> <div class="text"> <asp:TextBox runat="server" id="userName" /> <asp:RequiredFieldValidator runat="server" ID="userNameRequired" ControlToValidate="userName" ErrorMessage="User Name is required." ValidationGroup="ctl00$Login">*</asp:RequiredFieldValidator> </div> <div class="text"> <asp:TextBox runat="server" ID="password" TextMode="Password" /> <asp:RequiredFieldValidator ID="passwordRequired" runat="server" ControlToValidate="password" ErrorMessage="Password is required." ValidationGroup="ctl00$Login">*</asp:RequiredFieldValidator> </div> <div class="btn-block"> <asp:Button runat="server" ID="btnSignIn" CssClass="submit" ValidationGroup="ctl00$Login" OnClick="OnSignIn" /> </div> <asp:Label runat="server" ID="message" CssClass="message" /> </fieldset> </div> </div> <span class="top-l"></span><span class="top-r"></span><span class="bottom-l"></span><span class="bottom-r"></span> <act:TextBoxWatermarkExtender ID="userNameWatermark" runat="server" TargetControlID="userName" WatermarkText="Username" WatermarkCssClass="defaultTextActive" /> <act:TextBoxWatermarkExtender ID="passwordWatermark" runat="server" TargetControlID="password" WatermarkText="Password" WatermarkCssClass="defaultTextActive" /> </ContentTemplate> </asp:UpdatePanel></asp:Panel>Have you tried using a Fancybox or RadWindow (in ContentTemplate mode)?
I have my login control inside of a "popup" like twitter, but not a modal window, although the principle wouldn't be any different.
Hi,
Here's an idea - you can create a masterpage with your regular layout, which contains the login button/link and the Login control. What you can do is add an additional div element (e.g. "overlay") that is hidden by default but fades in when you press the login button and thus covers the entire content. You'll have another div as well (e.g. "LoginWrapper"), containing the login control which also fades in and displays the login control on top of the overlay div. Of course you can always fine-tune this by setting a cookie that will keep the login window open if an unsuccessful login attempt occurs, or implement similar functionalities, however the above solution seems the easiest to implement and will provide you with a modal login control that's present on your template an thus postback to the correct page every time. Please do not hesitate to contact me if this solution differs from what you demanded or you need some additional information.
Best wishes,
Boyan Barnev
the Telerik team