Open a modal popup using Javascript from a clickable image?

2 posts, 1 answers
  1. Kmcknight2001uk
    Kmcknight2001uk avatar
    1 posts
    Member since:
    Jun 2007

    Posted 08 May 2013 Link to this post

    Hi all,
    I'm looking into the Telerik toolset as part of an overall solution.

    Is it possible to open a modal popup using JavaScript like in the example below?
    I need an Image to be clickable and open a modal window which loads a specific URL.

    <a href="JavaScript:var options=SP.UI.$create_DialogOptions();
    options.url='http://webapp1/Pages/publishingPage.aspx?isdlg=1';
    options.width = 800;
    options.height = 600;
    options.title = 'A working and simple popup';
    void(SP.UI.ModalDialog.showModalDialog(options))">
    <img src="http://webapp1/Style Library/Images/icon.png" border="0" alt="A working and simple popup" />
    < /a>

    I opened a MSDN thread here to explain what I am trying to do: http://social.msdn.microsoft.com/Forums/en-US/sharepointdevelopmentprevious/thread/3da44ee9-86c5-4757-8028-ffbbc1cf87cd/

    Many thanks.
    Keith.
  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 10 May 2013 Link to this post

    Hello Keith,

    By using similar syntax you can open a RadWindow:
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server">
    </telerik:RadWindowManager>
    <a href="JavaScript:var options={};
         options.width = 800;
         options.height = 600;
         options.title = 'A working and simple popup';
         var wnd = radopen(options.url, null, options.width, options.height);
         wnd.set_title(options.title);">
        <img src="http://webapp1/Style Library/Images/icon.png" border="0" alt="A working and simple popup" />
    </a>

    In the JavaScript code I open a RadWindow in one of the possible ways (http://www.telerik.com/help/aspnet-ajax/window-programming-opening.html) and I use its client-side API (http://www.telerik.com/help/aspnet-ajax/window-programming-radwindow-methods.html) to set its title.

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top