Close modal on overlay click

9 posts, 1 answers
  1. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 27 Aug 2010 Link to this post

    Is it possible to close the modal by clicking the overlay?

    Something like you see with other modal scripts:

    overlayClose: true | false Close modal box by clicking on overlay. Default is true.

    Marc
  2. Answer
    Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 27 Aug 2010 Link to this post

    Hi Marc,

    Here is one way to do that:

    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" ID="ScriptManager1">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        </Scripts>
    </asp:ScriptManager>
    <telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true" Modal="true"
        OnClientShow="OnClientShow">
    </telerik:RadWindow>
    <script type="text/javascript">
     
        function OnClientShow(sender, args)
        {
            //use telerik's static client library to get a reference to the modal overlay object
            var overlay = $telerik.getElementByClassName(document, "TelerikModalOverlay");
            overlay.onclick = function ()
            {
                sender.close();
            }
        }
        
    </script>
    </form>

    I hope this helps.

    Regards,
    Georgi Tunev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kees
    Kees avatar
    2 posts
    Member since:
    Jun 2013

    Posted 19 Jun 2013 Link to this post

    So how do I do this when VisibleOnPageLoad = false?
    $telerik.getElementByClassName(document, "TelerikModalOverlay") will not give me a reference in that case.

    Greetings,
    Kees.
  5. Ivaylo
    Admin
    Ivaylo avatar
    37 posts

    Posted 20 Jun 2013 Link to this post

    Hello Kees,

    I have already replied to the support ticket that you have opened regarding the same issue.

    For convenience I am also pasting my response here:

    We have tested the described scenario and tried to replicate the issue, but without success. I have prepared a sample project with a window manager with the same properties that you have defined and one child window. VisibleOnPageLoad property is set to false, however, the problem that you are experiencing is not being reproduced on our side.

    I am also attaching a video illustrating the behavior observed by us. As you can see, the window always gets closed by clicking on the overlay.

    Could you, please, run the project that I have prepared and see whether the issue occurs in it as well? If not, we would need to ask you for a sample fully-runnable project isolating the problem, so that we can conduct further investigation.

    We will be expecting your feedback in case the problem persists.

    Regards,
    Ivaylo
    Telerik
    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 the blog feed now.
  6. Kees
    Kees avatar
    2 posts
    Member since:
    Jun 2013

    Posted 20 Jun 2013 Link to this post

    Hello Ivaylo,

    Thanks for your quick reply.
    The example you send me made me realize that i'm not starting a predefined radwindow. 
    I have set the windowmanager and use radopen to create a new window without specifying a specific window id.
    In that scenario the problem that I described is true.
    When id do predefine a specific window and start this one (in the second argument from radopen) then everything works as expected.

    Problem solved!
    Thanks again for your adequate reaction.

    Best regards,
    Kees van der Velden.

  7. miksh
    miksh avatar
    275 posts
    Member since:
    Nov 2006

    Posted 02 Jun 2014 in reply to Georgi Tunev Link to this post

    How to do it now - as of June 2014?

    The code var overlay = $telerik.getElementByClassName(document, "TelerikModalOverlay"); returns null.
  8. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3599 posts

    Posted 03 Jun 2014 Link to this post

    Hello,

    The first thing I can suggest is trying a small timeout.

    You may also find useful this code library entry: http://www.telerik.com/support/code-library/close-the-radwindow-object-on-click-outside-the-window.

    I am also attaching here a sample that goes through the inner properties of each RadWidow to connect it to its modal background element so clicking it will close the concrete instance. This can be helful if you work with multiple RadWindow instances.


    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.

     
  9. miksh
    miksh avatar
    275 posts
    Member since:
    Nov 2006

    Posted 03 Jun 2014 in reply to Marin Bratanov Link to this post

    Thanks, it works fine!

    Nowadays, this seems to be a common feature for popup windows so I'm surprized that it is still not a part of radWindow.
    Please consider to add it (a property?) to make it simple.
  10. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3599 posts

    Posted 03 Jun 2014 Link to this post

    Hello,

    I have added your request to our feedback portal: http://feedback.telerik.com/Project/108/Feedback/Details/130001-add-close-on-outside-click-feature-for-radwindow. You can use this page to vote, leave a comment and track the idea's progress.


    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017