New to Kendo UI for Angular? Start a free 30-day trial

Closing

The Popup provides events which facilitate common use cases such as closing the component after leaving the viewport and on document or Esc click.

After Leaving the Viewport

The anchorViewportLeave event is triggered when the anchor is scrolled outside the screen boundaries. When the anchor is not visible, use anchorViewportLeave to close the Popup—otherwise, it will remain visible within the screen boundaries.

When the container is scrolled, the Popup will not close automatically. To control the visibility of the Popup, explicitly set its hidden state.

Example
View Source
Change Theme:

On Document Click or Escape

To close the Popup when the user clicks outside its boundaries, wire the document.click event and determine whether the Popup was clicked. If clicked, the Popup remains open.

When the container is scrolled, the Popup will not close automatically. To control the visibility of the Popup, explicitly set its hidden state.

Example
View Source
Change Theme: