rad window as modal pop-up

[Narsing]

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.

[Shinu]

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.

[Svetlina Anati]

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

[Balakrishna Reddy]

Hi,
i am new this,i want to display a popup window when ever i change the selectedIndex of a DropdownList.
Please Help................

[Marin Bratanov]

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

[Balakrishna Reddy]

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>

[Princy]

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.

[Asutosh]

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>

[Marin Bratanov]

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