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:
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
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