Hello everyone. I was wondering if anyone knew how to make RadWindow look like the popup window on this website. I have seen a lot of sites with modal popups with the close icon in the right corner like this and would like to implement it with radwindow. Any ideas? Thank you!
Example: http://fancybox.net/
Example: http://fancybox.net/
3 Answers, 1 is accepted
0
Hello Avery,
Similar result could be achieved with the following code:
Attached is also fancyboxClose.png used for the example in the CSS code in the head section.
Please note, that similar behavior could be also achieved with RadToolTip and probably will look better. The close button manipulation will have almost similar CSS changes in order to have the same look and feel.
Regards,
Bojo
the Telerik team
Similar result could be achieved with the following code:
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title></title> <style type="text/css"> .rwControlButtons { position: relative; } .rwIcon { display: none !important; } .rwCloseButton { position: absolute; top: -18px; left: -8px; background-image: url(fancyboxClose.png) !important; background-position: 0 0 !important; width: 30px !important; height: 30px !important; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadWindow ID="SummaryRadWindow" runat="server" Behaviors="Close" Height="300px" Width="400px" VisibleOnPageLoad="true" Top="20" Left="20" EnableShadow="true" VisibleStatusbar="false"> <ContentTemplate> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu nisl eget erat elementum porttitor eget sed dui. Curabitur non tristique quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas lorem enim, pellentesque sed congue at, tincidunt ut justo. </ContentTemplate> </telerik:RadWindow> </form></body></html>Attached is also fancyboxClose.png used for the example in the CSS code in the head section.
Please note, that similar behavior could be also achieved with RadToolTip and probably will look better. The close button manipulation will have almost similar CSS changes in order to have the same look and feel.
Regards,
Bojo
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
0
Avery
Top achievements
Rank 1
Rank 1
answered on 20 Jul 2011, 10:23 PM
Thank you Bojo. I just tried this out and that worked great. Thank you for the fast response. One last question (I hope), when implementing this, the title bar is still big, so there is a nice border on the left,right and bottom but the top has a large border. I tried shrinking down the title height but that didn't work. Any solutions to get the border even all the way around?
Thank you!
Thank you!
0
Hello,
I have tried to make the sides all equal, but the top side could not be smaller. There should be a lot of CSS overwrites that could cause the Window not to behave properly.
Actually, the Window has property: VisibleTitlebar="false" which will make the titlebar to disappear and all sides to be equal, in that case however, all elements in the titlebar will be also disabled - such as control buttons.
My suggestion is to try the same scenario with tooltip control:
Click on the white rectangle you will get the result shown at the attached tooltipCloseButton.gif.
But if you still want to use RadWindow with VisibleTitlebar="false" you could probably create close button which should not be placed in the titlebar area and then to apply the necessary styles.
Greetings,
Bojo
the Telerik team
I have tried to make the sides all equal, but the top side could not be smaller. There should be a lot of CSS overwrites that could cause the Window not to behave properly.
Actually, the Window has property: VisibleTitlebar="false" which will make the titlebar to disappear and all sides to be equal, in that case however, all elements in the titlebar will be also disabled - such as control buttons.
My suggestion is to try the same scenario with tooltip control:
<%@ 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"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <style type="text/css"> .rtWrapperTopCenter { position: relative; } div.RadToolTip .rtWrapperTopCenter a.rtCloseButton { position: absolute; top: -18px; right: -16px; background-image: url(fancyboxClose.png) !important; background-position: 0 0 !important; width: 30px !important; height: 30px !important; } </style></head><body style="background: #6f6f6f;"> <form id="form1" runat="server"> <div style="margin-top: 50px;"> <br /><br /><br /> <asp:ScriptManager ID="sm1" runat="server" /> <asp:Image ID="imgStatus" AlternateText="Click Me" runat="server" Style="width: 100px; height: 100px; display: block; border: 2px solid white; color: #fff; margin: 100px auto;" /> <telerik:RadToolTipManager ID="ttmInstallStatus" OffsetY="-1" HideEvent="LeaveTargetAndToolTip" ShowEvent="OnClick" Width="400" Height="140" runat="server" RelativeTo="Element" Position="BottomLeft" ManualClose="true" Skin="Office2010Black" EnableShadow="true" Title="Title ToolTIp"> <WebServiceSettings Path="Test.aspx" /> <TargetControls> <telerik:ToolTipTargetControl TargetControlID="imgStatus" Value="Apple" /> </TargetControls> </telerik:RadToolTipManager> </div> </form></body></html>Click on the white rectangle you will get the result shown at the attached tooltipCloseButton.gif.
But if you still want to use RadWindow with VisibleTitlebar="false" you could probably create close button which should not be placed in the titlebar area and then to apply the necessary styles.
Greetings,
Bojo
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!