Completed
Last Updated: 29 Nov 2021 12:27 by ADMIN
Release 2.30.0
Roger
Created on: 31 Jan 2020 03:58
Category: Window
Type: Feature Request
19
Window Modal - Click on Overlay to close
Does the Window component have the ability to close when the overlay outside of the modal is clicked?
2 comments
ADMIN
Marin Bratanov
Posted on: 31 Jan 2020 13:53

Hi again Roger,

I made an example for the modal window that you can try in the meantime (of course, it could be refactored for better reuse, encapsulation and code quality) and you can find it attached at the end of this post. The key points are:

  • there is some JS interop that is needed to capture the click on the modal overlay (inline in the _Host page)
  • there is a JS dispatcher service that is used to work with this JS Interop (in the Shared folder - both the service, and a component used to dispatch the event handler to the particular component instance where we need it)
  • depending on the window visibility, attach or detach a click handler to the overlay element that gets rendered. A timeout is needed during rendering to let the browser actually create the DOM element.
  • most of the defensive checks are required so that JS Interop calls don't throw during prerendering.

For a non-modal window, this is much much easier, just add this to the page instead of the whole JS Interop drama - the key thing is to have the z-index lower than the window's but higher than some other elements/popups on the page:

 

<TelerikWindow @bind-Visible="@WindowIsVisible" Modal="false">
    <WindowTitle>
        <strong>The Title</strong>
    </WindowTitle>
    <WindowContent>
        This is my window <strong>popup</strong> content.
    </WindowContent>
    <WindowActions>
        <WindowAction Name="Minimize"></WindowAction>
        <WindowAction Name="Maximize"></WindowAction>
        <WindowAction Name="Close"></WindowAction>
    </WindowActions>
</TelerikWindow>

<TelerikButton OnClick="@( () => WindowIsVisible = !WindowIsVisible )">Toggle window</TelerikButton>

@if (WindowIsVisible)
{
    <div style="position:fixed;top:0;left:0;bottom:0;right:0;z-index:10001;"
         @onclick="@( () =>  WindowIsVisible = false )"></div>
}

@code {
    bool WindowIsVisible { get; set; }
}

 

 

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor

Attached Files:
ADMIN
Marin Bratanov
Posted on: 31 Jan 2020 10:44

Hello Roger, 

I moved this idea to the Feedback portal so you can Follow its implementation: https://feedback.telerik.com/blazor/1451714-window-modal-click-on-overlay-to-close.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor