Does the Window component have the ability to close when the overlay outside of the modal is clicked?
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: