Close button like lightbox?

8 posts, 0 answers
  1. randall
    randall avatar
    40 posts
    Member since:
    Apr 2009

    Posted 08 Jun 2011 Link to this post

    Hi,
    currently using a RadWindow with not title bar and therefore only the frame shows up.
    My goal is to add a "close" button to the top-right that looks like a Shadowbox/lightbox one.

    therefore the button actually shows up over the corner of the frame.

    is there a way to accomplish this?

  2. Gimmik
    Gimmik avatar
    170 posts
    Member since:
    May 2011

    Posted 08 Jun 2011 Link to this post

    Hi Randall,

    Can you use an simple RadImageButton in your window? You can use any image you want as the button and dynamically position it where ever needed.

    Here are some demos that might give you a creative idea.
    http://demos.telerik.com/aspnet-ajax/button/examples/imagebutton/defaultcs.aspx

    Let me know if that works,
    -Gimmik
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. randall
    randall avatar
    40 posts
    Member since:
    Apr 2009

    Posted 08 Jun 2011 Link to this post

    Thanks,
    however i must still be doing something wrong.
    while i can easily place a button and move it around within the window, the problem is that the window frame is "on top" so i don;t get the effect I'm looking for.  in the example below i added the button to the radwindow template.

    i have also tried changing the z-order, but that too did not work.

    thoughts?

    Example code:
    <telerik:RadWindow ID="RadWindow1" Title="Request Access" NavigateUrl="PrivlegeRequest.aspx"
                    runat="server" Animation="Fade" Width="600" Height="350" Modal="True" KeepInScreenBounds="True"
                    ShowContentDuringLoad="true">
                    <ContentTemplate>
                        <telerik:RadButton ID="RadButton2" runat="server" Text="hello" CssClass="button_location">
                        </telerik:RadButton>
                    </ContentTemplate>
                </telerik:RadWindow>
  5. Gimmik
    Gimmik avatar
    170 posts
    Member since:
    May 2011

    Posted 08 Jun 2011 Link to this post

    Can you post a screenshot so I can see the issue you're seeing?
  6. randall
    randall avatar
    40 posts
    Member since:
    Apr 2009

    Posted 08 Jun 2011 Link to this post

    here is a snapshot of the left-top corner.
    as you can see the edge of the window is visible, with the button showing under it.

    i used this CSS to move the button as you can see its off the page limits.

    .button_location
            {
                position:static;
                left: -10px;
                top: -10px;           
            }

    like i said before, i also added a z-order or -1, changed the position to relative, absolute etc...none worked

    thoughts?
  7. Gimmik
    Gimmik avatar
    170 posts
    Member since:
    May 2011

    Posted 08 Jun 2011 Link to this post

    Hi Randall,

    I don't think there is a way to display the button on top of the border. You may be able to use some advanced CSS techniques to remove the border completely if that's what you need.

    What is the ultimate purpose for the RadWindow? Are you able to implement the needed functionality in a RadDock?

    -Gimmik
  8. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 10 Jun 2011 Link to this post

    Hello Randall,

    Why not just use a RadToolTip with an iFrame as it's content? The close button for the RadToolTip always shows above its content.
  9. Bozhidar
    Admin
    Bozhidar avatar
    679 posts

    Posted 10 Jun 2011 Link to this post

    Hi,

    I am not quite sure what you want to achieve without image attached, but the following code could be probably useful :

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
            .button_location
            {
                position: absolute !important;
                right: 10px;
                top: 10px;
                z-index: 10000;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server" style="height: 100%;">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadWindow ID="RadWindow1" Title="Request Access" NavigateUrl="PrivlegeRequest.aspx"
            runat="server" Animation="Fade" Width="600" Height="350" Modal="True" KeepInScreenBounds="True"
            VisibleOnPageLoad="true" VisibleTitlebar="false">
            <ContentTemplate>
                <telerik:RadButton ID="RadButton2" runat="server" Width="22" CssClass="button_location">
                    <Icon PrimaryIconCssClass="rbCancel" PrimaryIconLeft="6" PrimaryIconTop="4" />
                </telerik:RadButton>
            </ContentTemplate>
        </telerik:RadWindow>
        </form>
    </body>
    </html>



    Regards,
    Bojo
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017