# Modal not receiving touch events

**URL:** <https://forum.ionicframework.com/t/modal-not-receiving-touch-events/8025>\
**Category:** ionic-v1\
**Created:** [August 10, 2014, 10:04pm UTC](https://forum.ionicframework.com/t/modal-not-receiving-touch-events/8025 "2014-08-10T22:04:55Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rishi](https://avatars.discourse-cdn.com/v4/letter/r/90db22/32.png) [@rishi](https://forum.ionicframework.com/u/rishi)\
**Post date:** [August 10, 2014, 10:04pm UTC](https://forum.ionicframework.com/t/modal-not-receiving-touch-events/8025/1 "2014-08-10T22:04:55Z")

</div>

Hi,

My modals aren’t receiving touch events; specifically, `pointer-events: auto` is being overriden:

![](https://sea1.discourse-cdn.com/ionicframework/uploads/default/3149/a4f3fba3c8a506b0.png)

In the picture of webkit inspector above, the `pointer-events: auto` is being superseded by the `pointer-events: none`.

A solution is to do the following:

```
.modal-open .modal, .modal-open .modal-backdrop {
    pointer-events: auto !important;
}

```

But I’m curious as to why this is happening in the first place. Anyone have any ideas?

---

<div class="post-metadata">

**Author:** ![rs324](https://avatars.discourse-cdn.com/v4/letter/r/85f322/32.png) [@rs324](https://forum.ionicframework.com/u/rs324)\
**Post date:** [August 11, 2014, 12:44am UTC](https://forum.ionicframework.com/t/modal-not-receiving-touch-events/8025/2 "2014-08-11T00:44:48Z")

</div>

your modals not receiving touch/click evens because your body tag have “loading-active” class  
I have tested it and its seems as bug on the ionicLoading while changing states,

i wrote about it here,

> **[ionicLoading Bug](http://forum.ionicframework.com/t/ionicloading-bug/8001)**
>
> Hi sometimes (when you switch states really fast) , the ionic loading.hide is not removing the "loader-active" class from body element which makes modals buttons not useable took me a long time to figure it out , this is my code ...

---

<div class="post-metadata">

**Author:** ![mbuster](https://avatars.discourse-cdn.com/v4/letter/m/3d9bf3/32.png) [@mbuster](https://forum.ionicframework.com/u/mbuster)\
**Post date:** [August 11, 2014, 12:24pm UTC](https://forum.ionicframework.com/t/modal-not-receiving-touch-events/8025/3 "2014-08-11T12:24:31Z")

</div>

Seems to be related to this open issue:

> <https://github.com/ionic-team/ionic/issues/1912>

---

<div class="post-metadata">

**Author:** ![Dipesh](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/dipesh/32/7649_2.png) [@Dipesh](https://forum.ionicframework.com/u/Dipesh)\
**Post date:** [August 24, 2014, 1:35pm UTC](https://forum.ionicframework.com/t/modal-not-receiving-touch-events/8025/4 "2014-08-24T13:35:51Z")

</div>

My current workaround for this problem:

```
 $scope.$on('modal.shown',function() {
     setTimeout(function(){
          if( $document[0].body.classList.contains('loading-active')) {
              $document[0].body.classList.remove('loading-active');
          }
      },50);
});  
```

---

<div class="post-metadata">

**Author:** ![quypham](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/quypham/32/98341_2.png) [@quypham](https://forum.ionicframework.com/u/quypham)\
**Post date:** [March 16, 2016, 7:46am UTC](https://forum.ionicframework.com/t/modal-not-receiving-touch-events/8025/5 "2016-03-16T07:46:35Z")

</div>

You have save my day! Thank you, buddy!

> [@rishi](#):
>
> A solution is to do the following:
> 
> .modal-open .modal, .modal-open .modal-backdrop {  
> pointer-events: auto !important;  
> }