Close modal on overlay click

[Fit2Page]

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

[Georgi Tunev]

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
        //http://www.telerik.com/help/aspnet-ajax/telerik-static-client-library.html
        var overlay = $telerik.getElementByClassName(document, "TelerikModalOverlay");
        overlay.onclick = function ()
        {
            sender.close();
        }
    }

</script>
</form>

I hope this helps.

Regards,
Georgi Tunev
the Telerik team

[Kees]

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

Greetings,
Kees.

[Ivaylo]

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

[Kees]

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.

[miksh]

How to do it now - as of June 2014?

The code var overlay = $telerik.getElementByClassName(document, "TelerikModalOverlay"); returns null.

[Marin Bratanov]

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

 

 

[miksh]

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.

[Marin Bratanov]

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