当弹出窗口处于活动状态时,如何与离子中的项目进行交互?

问题描述:

Ionic版本:1.x

Ionic Version: 1.x

平台:全部

我有一个离子应用程序使用了离子弹出。但是,当弹出窗口处于活动状态(打开)时,我无法再与后台的内容进行交互,例如向下滚动我的项目列表。我已经尝试寻找这个问题的现有答案,但没有看到问题。

I have an ionic app which uses an ionic popover. However, when the popover is active (open), I can no longer interact with things in the background, for example scroll down my list of items. I have tried looking for existing answers for this question, but did not see the question being asked.

popover本身不必绑定到任何活动元素页面,因为它当前有位置:固定并且总是出现在同一位置。

The popover itself does not have to be bound to any active element on the page, since it currently has position:fixed and will always appear in the same position.

所以基本上问题是,有没有办法防止弹出窗口阻止我与背景中的所有内容进行交互?

So basically the question is, is there a way to prevent the popover from preventing me interacting with everything in the background?

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

I have found an answer, however, not sure if there is a better way to do this, perhaps an option that turns interacting with the background on and off, but for now the answer seems to be as follows:


  1. 确保.popover-backdrop类与实际固定的popover元素具有相同的大小和位置(在我的情况下是高度和上边距)。默认值为height 100%。

  2. 确保对.popover-open类(应用于正文)禁用 pointer-events:none;

  3. 请记住,这将改变行为,如果您在弹出窗口外单击它将默认关闭它。所以在离子方面,我必须确保在我离开视图时关闭弹出窗口的事件如果处于活动状态。