Добавьте элемент <div>, который имеет размер экрана и z-indexed на 1 ниже, чем всплывающее меню, но выше, чем остальная часть приложения. Вам нужно будет использовать position: fixed в классе CSS, а затем width: 100%; height: 100%; top: 0%; left: 0%;, чтобы он заполнил страницу. Начальное CSS отображаемое значение должно быть display: none;. Когда вы открываете всплывающее окно, также измените свойство отображения div на display: flex, чтобы добавить его в DOM, затем добавьте обработчик клика @OnClick для этого плавающего div, который закроет всплывающее окно И вернет свойство отображения плавающего div обратно до display: none;. Div должен быть четким, чтобы вы могли видеть остальную часть приложения позади него, но позволяет вам щелкнуть вне всплывающего окна для поведения, которое вы ищете, так как где-нибудь вне всплывающего окна будет на Div, охватывающих остальную часть экрана ,
Обратите внимание, что во всплывающем окне вам также нужно будет установить плавающее значение отображения Div обратно на «none», когда вы закрываете всплывающее окно изнутри всплывающего окна, в противном случае оно будет задерживаться и потребовать дополнительный щелчок, чтобы получить до go.
Вы также можете слегка закрасить элемент Div прозрачностью, чтобы обеспечить эффект выделения для всплывающего окна при его открытии.