ionicModal 禁用点击事件答案

【问题标题】：ionicModal disabling click-eventsionicModal 禁用点击事件
【发布时间】：2016-03-31 01:31:01
【问题描述】：

Ionic/cordova/angular/ios 应用：

我正在使用 angular-notify 来显示附加了 ng-click 事件的覆盖消息。它们显示得很好并且 ng-click 事件注册除了 ionicModal 打开时 - 当它打开并显示 angular-notify 消息时，我无法单击它。一旦我点击关闭模式（我必须点击我的通知，因为它覆盖了关闭按钮但它仍然关闭模式），ng-click 再次注册。

我不确定如何测试这个理论，但感觉就像 ionicModal 捕获或禁用了点击。我可以做些什么（z-index 设置为 99999）来注册这些点击吗？

-- 更新（在 Chrome 中使用检查器进行测试）

加载元素的顺序似乎并不重要。无论是首先加载模式、通知覆盖还是弹出窗口，问题仍然存在。

我的通知叠加层的点击事件被切断，直到模式和/或弹出窗口被解除。

当我查看 DOM 检查器时，我看到在弹出窗口或模式实例化时创建了一些 div。这个：

<div class="click-block click-block-hide"></div>

看起来它可能会导致我的问题，但它在 DOM 中的位置较低，当我删除元素（在 Chrome Inspector 中）时，它并不能解决我的问题。

无论我设置了什么 z-index 或者我将元素在 DOM 中移动到哪里（通过检查器）或者我删除了哪些背景 div 元素，我仍然无法点击我的通知，直到任何和所有弹出/模态都被解除。

有什么想法吗？

【问题讨论】：

标签： javascript angularjs ionic-framework

【解决方案1】：

你能更好地解释一下布局吗？ ionicModal 是否位于消息之上？还是他们并排？

如果模态框位于消息上方，那么这是 z-index 的问题。您需要确保正在使用的类的 z-index 没有覆盖 z-index 99999。

【讨论】：

通知覆盖在离子模态的顶部显示得很好——我相信这意味着 Z 指数高于模态的指数。我不确定他们的模板 HTML 何时何地插入到 Dom 中，但我认为 Ionicmodal 正在禁用任何点击

【解决方案2】：

我想通了，至少如何破解它。 $ionicModal 和 $ionicPopup 为 body 元素 <body class='popup-open modal-open'> 添加了一个类。我没有研究如何，但它阻止点击我的通知。

所以我在 angular-notify 通知中添加了一个间隔，以从 $ionicBody 中删除 modal-open 和 popup-open 类。

var notificationInterval;
notificationInterval = $interval(function() {
  $ionicBody.removeClass('modal-open');
  $ionicBody.removeClass('popup-open');
  //  console.log("removing those body classes while the notification is up.");
}, 1000)

对于通知解除，我添加到 $scope.$close 函数中

$interval.cancel(notificationInterval)

【讨论】：