This is a migrated thread and some comments may be shown as answers.

Close button like lightbox?

7 Answers 84 Views
Window
This is a migrated thread and some comments may be shown as answers.
randall
Top achievements
Rank 1
randall asked on 08 Jun 2011, 07:39 PM
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?

7 Answers, 1 is accepted

Sort by
0
Gimmik
Top achievements
Rank 1
answered on 08 Jun 2011, 08:12 PM
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
0
randall
Top achievements
Rank 1
answered on 08 Jun 2011, 08:19 PM
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>
0
Gimmik
Top achievements
Rank 1
answered on 08 Jun 2011, 08:45 PM
Can you post a screenshot so I can see the issue you're seeing?
0
randall
Top achievements
Rank 1
answered on 08 Jun 2011, 08:53 PM
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?
0
Gimmik
Top achievements
Rank 1
answered on 08 Jun 2011, 09:33 PM
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
0
Cori
Top achievements
Rank 2
answered on 10 Jun 2011, 12:49 PM
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.
0
Bozhidar
Telerik team
answered on 10 Jun 2011, 03:20 PM
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.

Tags
Window
Asked by
randall
Top achievements
Rank 1
Answers by
Gimmik
Top achievements
Rank 1
randall
Top achievements
Rank 1
Cori
Top achievements
Rank 2
Bozhidar
Telerik team
Share this question
or