Prevent LightBox closing

4 posts, 0 answers
  1. Jack
    Jack avatar
    128 posts
    Member since:
    May 2003

    Posted 22 Feb 2014 Link to this post

    Hi,

    I  am opening a contact form in a LightBox similar to the template demo. The form is a usercontrol inside the LightBox Item Template.
    When the form is submitted - how can I keep the LightBox open so I can display a 'sent' message to the user? At present submitting the form closes the LightBox.

    Cheers,

    Jack 
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 26 Feb 2014 in reply to Jack Link to this post

    Hi Jack,

    Please have a look into the sample code snippet which works fine at my end.

    ASPX:
    <telerik:RadLightBox ID="FeedbackLightBox" runat="server" Width="400px" Height="250px"
        CssClass="lb_feedback" Modal="true">
        <ClientSettings>
            <AnimationSettings HideAnimation="Resize" NextAnimation="Fade" PrevAnimation="Fade"
                ShowAnimation="Resize" />
        </ClientSettings>
        <Items>
            <telerik:RadLightBoxItem>
                <ItemTemplate>
                    <asp:Label ID="FormTitle" runat="server" Text="SHARE YOUR FEEDBACK" CssClass="feedback_header"></asp:Label>
                    <br />
                    <asp:Label Text="FirstName:" ID="FirstNameLabel" runat="server" CssClass="feedback_label" />
                    <telerik:RadTextBox runat="server" ID="FirstNameTextBox" Width="245px" />
                    <br />
                    <asp:Label Text="LastName:" ID="LastNameLabel" runat="server" CssClass="feedback_label" />
                    <telerik:RadTextBox runat="server" ID="LastNameTextBox" Width="245px" />
                    <br />
                    <asp:Label Text="Email:" ID="EmailLabel" runat="server" CssClass="feedback_label" />
                    <telerik:RadTextBox runat="server" ID="EmailTextBox" Width="245px" />
                    <br />
                    <asp:Label Text="Comments:" ID="CommentsLabel" runat="server" CssClass="feedback_label" />
                    <telerik:RadTextBox ID="RadTextBox1" runat="server" Resize="None" TextMode="MultiLine"
                        Width="245px" Height="100px">
                    </telerik:RadTextBox>
                    <br />
                    <asp:Label ID="Label1" runat="server" Text="Mail Sent" Style="display: none;" CssClass="demo">
                    </asp:Label>
                    <telerik:RadButton ID="RadButton1" Text="Submit Feedback" runat="server" Skin="Silk" CssClass="submit_feedback_btn rbPrimaryButton" AutoPostBack="false" OnClientClicked="ShowMessage">
                    </telerik:RadButton>
                </ItemTemplate>
            </telerik:RadLightBoxItem>
        </Items>
    </telerik:RadLightBox>

    JavaScript:
    <script type="text/javascript">
        function OpenCodeLightBox() {
            var lightBox = $find('<%=FeedbackLightBox.ClientID %>');
            lightBox.show();
        }
        function ShowMessage() {
            var lightBox = $find('<%=FeedbackLightBox.ClientID %>');
            var label= lightBox.get_element().getElementsByClassName("demo");
            label.FeedbackLightBox_Label1.style.display = "block";
        }
    </script>

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jack
    Jack avatar
    128 posts
    Member since:
    May 2003

    Posted 14 Mar 2014 in reply to Princy Link to this post

    Thanks Princy,

    I just can't get this to work for some reason; also would prefer to use a usercontrol inside the LightBox if that's at all possible for getting it to stay open.

    Cheers,
    Jack
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 18 Mar 2014 in reply to Jack Link to this post

    Hi Jack,

    Please try the sample code snippet which works fine at my end.

    ASPX:
    <telerik:RadButton ID="RadButton1" runat="server" Text="OpenFeedBackLightBox" AutoPostBack="false"
        OnClientClicked="OpenFeedbackLightBox">
    </telerik:RadButton>
    <telerik:RadLightBox ID="FeedbackLightBox" runat="server" Width="400px" Height="250px" Modal="true">
        <ClientSettings>
            <AnimationSettings HideAnimation="Resize" NextAnimation="Fade" PrevAnimation="Fade"
                ShowAnimation="Resize" />
        </ClientSettings>
        <Items>
            <telerik:RadLightBoxItem>
                <ItemTemplate>
                    <uc1:WebUserControl ID="WebUserControl1" runat="server" />
                </ItemTemplate>
            </telerik:RadLightBoxItem>
        </Items>
    </telerik:RadLightBox>

    ASCX:
    <asp:Label ID="FormTitle" runat="server" Text="SHARE YOUR FEEDBACK"></asp:Label>
    <br />
    <asp:Label Text="FirstName:" ID="FirstNameLabel" runat="server" />
    <telerik:RadTextBox runat="server" ID="FirstNameTextBox" Width="245px" />
    <br />
    <asp:Label Text="Email:" ID="EmailLabel" runat="server" />
    <telerik:RadTextBox runat="server" ID="EmailTextBox" Width="245px" />
    <br />
    <asp:Label ID="Label1" runat="server" Text="Mail Sent" Style="display: none;" CssClass="demo">
    </asp:Label>
    <telerik:RadButton ID="RadButton1" Text="Submit Feedback" runat="server" Skin="Silk"
        AutoPostBack="false" OnClientClicked="ShowMessage">
    </telerik:RadButton>

    JavaScript:
    <script type="text/javascript">
        function OpenFeedbackLightBox() {
            var lightBox = $find('<%=FeedbackLightBox.ClientID %>');
            lightBox.show();
        }
        function ShowMessage() {
            var lightBox = $find('<%=FeedbackLightBox.ClientID %>');
            var label = lightBox.get_element().getElementsByClassName("demo");
            lightBox.get_element().getElementsByClassName("demo").FeedbackLightBox_WebUserControl1_Label1.style.display = "block";
        }
    </script>

    Hope this will helps you.
    Thanks,
    Princy.
Back to Top