当弹出框处于活动状态时，如何在离子中与背景中的项目进行交互

How do I interact with items in the background in ionic while a popover is active?

本文关键字：背景 交互 项目 活动状态      更新时间：2023-09-26

离子版本：1.x

平台：全部

我有一个使用离子弹出框的离子应用程序。但是，当弹出框处于活动状态（打开）时，我无法再与后台中的事物进行交互，例如向下滚动我的项目列表。我试图寻找这个问题的现有答案，但没有看到被问到的问题。

弹出框本身不必绑定到页面上的任何活动元素，因为它当前具有 position：fixed 并且将始终显示在同一位置。

所以基本上问题是，有没有办法防止弹出框阻止我与后台的所有内容进行交互？

我发现有人放了这个代码笔：

https://codepen.io/ionic/pen/GpCst

这可能行得通？

.popover-backdrop {
  display:none;
}

我找到了一个答案，但是，不确定是否有更好的方法可以做到这一点，也许是一个打开和关闭与背景交互的选项，但现在答案似乎如下：

  1. 确保 .popover-backdrop 类的大小和位置（在我的例子中为高度和上边距）与实际的固定弹出框元素相同。默认值为 height 100%。
  2. 确保对 .popover-open 类（应用于正文）禁用pointer-events: none;
  3. 请记住，这将改变默认情况下在弹出框外部单击时将关闭它的行为。因此，在ionic中，我必须确保在我离开关闭弹出窗口（如果处于活动状态）的视图的事件上。
相关文章：