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

rad window as modal pop-up

8 Answers 2548 Views
Window
This is a migrated thread and some comments may be shown as answers.
Narsing
Top achievements
Rank 1
Narsing asked on 30 Dec 2011, 06:54 AM
1) Do you have an example to display image in a rad window as modal pop-up
2) Display rad window on a image client side click event.

Thanks.

8 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 30 Dec 2011, 09:37 AM
Hello,

Try the following.
ASPX:
<asp:Button ID="Button1" runat="server" Text="Click" OnClientClick="openwin();return false" />
<telerik:RadWindowManager ID="RadWindowManager1" runat="server">
   <Windows>
     <telerik:RadWindow ID="RadWindow1" runat="server"  Modal="true">
        <ContentTemplate>
           <iframe id="iframe1" runat="server" width="600px" height="600px" src="../Images/Image1.jpg">
            </iframe>
         </ContentTemplate>
     </telerik:RadWindow>
  </Windows>
</telerik:RadWindowManager>

JS:
<script type="text/javascript">
 function openwin()
  {
    window.radopen(null, "RadWindow1");
  }
</script>

-Shinu.
0
Svetlina Anati
Telerik team
answered on 03 Jan 2012, 02:44 PM
Hi Narsing,

You could additionally simplify Shinu's code by removing the IFRAME placed in the ContentTemplate and put there a simple asp:Image or an img tag. Also, you do not need to return false in the onclick handler since you will be using  an img which is not a postback element in difference with the button Shinu has used.

In order to get a better understanding on how to use RadWindow, please examine our online demos below:

http://demos.telerik.com/aspnet-ajax/window/examples/overview/defaultcs.aspx

Greetings,
Svetlina Anati
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Balakrishna Reddy
Top achievements
Rank 1
answered on 28 Feb 2013, 10:19 AM
Hi,
i am new this,i want to display a popup window when ever i change the selectedIndex of a DropdownList.
Please Help................
0
Marin Bratanov
Telerik team
answered on 28 Feb 2013, 02:29 PM
Hi,

I am not sure which dropdown list you need. If this is a standard select element you can use its onchange event. If you are using a RadComboBox you can use its OnClientSelectedIndexChanged event. Then open the RadWindow in any one of the manners shown in this help article: http://www.telerik.com/help/aspnet-ajax/window-programming-opening.html. If you want to do this from the server take a look at this sticky thread.


All the best,
Marin Bratanov
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Balakrishna Reddy
Top achievements
Rank 1
answered on 01 Mar 2013, 10:39 AM
hi,
   The following is my code for displaying PopUp in my Page.
Here when i am clicking on the Button it is not displaying PopUp...
So Please help me...
 
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
     
      <asp:Button ID="Button1" runat="server" Text="Click here to show the modal" />
            <cc1:ModalPopupExtender ID="ModalPopupExtender1" BackgroundCssClass="ModalPopupBG"
                  runat="server" CancelControlID="btnCancel" OkControlID="btnOkay" TargetControlID="Button1"
                  PopupControlID="Panel1" Drag="true" PopupDragHandleControlID="PopupHeader">
            </cc1:ModalPopupExtender>
 
            <div id="Panel1" style="display: none;" class="popupConfirmation">
                  <div class="popup_Container">
                        <div class="popup_Titlebar" id="PopupHeader">
                              <div class="TitlebarLeft">Popup Header</div>
                              <div class="TitlebarRight"></div>
                        </div>
                        <div class="popup_Body">
                              <p>
                                    This is a simple modal dialog
                              </p>
                        </div>
                        <div class="popup_Buttons">
                              <input id="btnOkay" value="Done" type="button" />
                              <input id="btnCancel" value="Cancel" type="button" />
                        </div>
                  </div>
            </div>
 
</asp:Content>
0
Princy
Top achievements
Rank 2
answered on 04 Mar 2013, 05:20 AM
Hello Balakrishna Reddy,

I tried the mark up you provided but I was not able to replicate the issue. For me, everything is working fine with the same code provided that I made some modifications in the CSS classes since you have not given your CSS. Please have a look at the following code.

ASPX:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="Click here to show the modal" />
        <cc1:ModalPopupExtender ID="ModalPopupExtender1" BackgroundCssClass="BackGround"
            runat="server" CancelControlID="btnCancel" OkControlID="btnOkay" TargetControlID="Button1"
            PopupControlID="Panel1" Drag="true" PopupDragHandleControlID="PopupHeader">
        </cc1:ModalPopupExtender>
        <div id="Panel1" style="display: none;" class="popupConfirmation">
            <div>
                <div id="PopupHeader">
                    <div>
                        Popup Header</div>
                </div>
                <div>
                    <p>
                        This is a simple modal dialog
                    </p>
                </div>
                <div>
                    <input id="btnOkay" value="Done" type="button" />
                    <input id="btnCancel" value="Cancel" type="button" />
                </div>
            </div>
        </div>
    </div>
</asp:Content>

CSS:
<style type="text/css">
    .BackGround
    {
        background-color: Gray;
        filter: alpha(opacity=70);
        opacity: 0.7;
        z-index: 100 !important;
    }
    .popupConfirmation
    {
        padding-left: 20px;
        background-color: #7DE6F8;
        border: 1px solid red;
        width: 400px;
        height: 300px;
    }
</style>

Thanks,
Princy.
0
Asutosh
Top achievements
Rank 1
answered on 05 Jun 2014, 11:08 AM
hi i am using following code
when i use it in simple aspx page it work properly but when i apply it in page which contain Master Page then it not working.
can you tell me how to solve it

<asp:Button ID="Button1" runat="server" Text="Click" OnClientClick="openwin();return false" />
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server">
        <Windows>
            <telerik:RadWindow ID="RadWindow1" runat="server" Modal="true">
                <ContentTemplate>
                   <asp:Label runat="server" Text="open"></asp:Label>
                </ContentTemplate>
            </telerik:RadWindow>
        </Windows>
    </telerik:RadWindowManager>
    <script type="text/javascript">
        function openwin() {
          
            window.radopen(null, "RadWindow1");
        }
</script>






0
Marin Bratanov
Telerik team
answered on 05 Jun 2014, 04:34 PM

Hello Asutosh,

Most likely, you have several RadWindowManagers on the page, so radopen() is not tied to the one you need. This scenario and how to overcome it is explained here: http://www.telerik.com/help/aspnet-ajax/window-troubleshooting-wrong-window-opened.html.

I also advise that you use RadWindows with their ContentTemplate outside of the Windows collection of a RadWindowManager, so you can use the $find().show() approach to open them.

Regards,

Marin Bratanov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Window
Asked by
Narsing
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Svetlina Anati
Telerik team
Balakrishna Reddy
Top achievements
Rank 1
Marin Bratanov
Telerik team
Princy
Top achievements
Rank 2
Asutosh
Top achievements
Rank 1
Share this question
or