# Any modal examples/demos?

**URL:** <https://forum.ionicframework.com/t/any-modal-examples-demos/1350>\
**Category:** ionic-v1\
**Created:** [February 25, 2014, 4:53pm UTC](https://forum.ionicframework.com/t/any-modal-examples-demos/1350 "2014-02-25T16:53:10Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![corypedia](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@corypedia](https://forum.ionicframework.com/u/corypedia)\
**Post date:** [February 25, 2014, 4:53pm UTC](https://forum.ionicframework.com/t/any-modal-examples-demos/1350/1 "2014-02-25T16:53:11Z")

</div>

I’m looking for an example of how to use a Modal. Can’t seem to figure it out for whatever reason. The example in the docs isn’t very descriptive.

Just trying to do a simple “Forgot Password” modal.

---

<div class="post-metadata">

**Author:** ![adam](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/adam/32/63947_2.png) [@adam](https://forum.ionicframework.com/u/adam)\
**Post date:** [February 25, 2014, 5:00pm UTC](https://forum.ionicframework.com/t/any-modal-examples-demos/1350/2 "2014-02-25T17:00:40Z")

</div>

https://codepen.io/ionic/embed/preview/gblny?height=300&slug-hash=gblny&default-tabs=html,result&host=https://codepen.io

---

<div class="post-metadata">

**Author:** ![corypedia](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@corypedia](https://forum.ionicframework.com/u/corypedia)\
**Post date:** [February 25, 2014, 7:38pm UTC](https://forum.ionicframework.com/t/any-modal-examples-demos/1350/3 "2014-02-25T19:38:03Z")

</div>

Awesome thanks. Couple questions…

Why is the following needed on `ModalCtrl`? wouldn’t `closeModal` be inherited from `AppCtrl`:

```
$scope.close = function() {
  $scope.modal.hide();
};
```

---

<div class="post-metadata">

**Author:** ![corypedia](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@corypedia](https://forum.ionicframework.com/u/corypedia)\
**Post date:** [February 25, 2014, 7:43pm UTC](https://forum.ionicframework.com/t/any-modal-examples-demos/1350/4 "2014-02-25T19:43:37Z")

</div>

I just used `ng-click="modal.hide()"`

---

<div class="post-metadata">

**Author:** ![corypedia](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@corypedia](https://forum.ionicframework.com/u/corypedia)\
**Post date:** [February 25, 2014, 8:08pm UTC](https://forum.ionicframework.com/t/any-modal-examples-demos/1350/5 "2014-02-25T20:08:36Z")

</div>

I just updated to 0.9.25 and prefixed everything with `ion-` and in doing so the modal displays but you can still see the content in the background that it is overlaying.

---

<div class="post-metadata">

**Author:** ![adam](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/adam/32/63947_2.png) [@adam](https://forum.ionicframework.com/u/adam)\
**Post date:** [February 25, 2014, 8:35pm UTC](https://forum.ionicframework.com/t/any-modal-examples-demos/1350/6 "2014-02-25T20:35:04Z")

</div>

Yes you’re right about just using `ng-click="modal.hide()"`. I added in the extra function for an example how the modal can have it’s own methods too.

Would you be able to update your code to the nightly build and see if you still have the transparent background issues? It looks like in 0.9.25 the method of enabling/disabling pointer events was causing a bug, but since then I’ve rewritten how that all works.

Please give the nightly build a shot and let me know if it fixed it for you, thanks:  
[http://code.ionicframework.com/#nightly](http://code.ionicframework.com/#nightly)

---

<div class="post-metadata">

**Author:** ![corypedia](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@corypedia](https://forum.ionicframework.com/u/corypedia)\
**Post date:** [February 26, 2014, 4:28pm UTC](https://forum.ionicframework.com/t/any-modal-examples-demos/1350/7 "2014-02-26T16:28:33Z")

</div>

appears to be fixed. thanks!

---

<div class="post-metadata">

**Author:** ![krur](https://avatars.discourse-cdn.com/v4/letter/k/e95f7d/32.png) [@krur](https://forum.ionicframework.com/u/krur)\
**Post date:** [February 26, 2014, 5:30pm UTC](https://forum.ionicframework.com/t/any-modal-examples-demos/1350/8 "2014-02-26T17:30:49Z")

</div>

> [@adam](#):
>
> Please give the nightly build a shot and let me know if it fixed it for you, thanks:[Ionic Framework CDN](http://code.ionicframework.com/#nightly)

thanks Adam for the link [http://code.ionicframework.com](http://code.ionicframework.com)  
i saw it in [GitHub - ionic-team/ionic-code: Ionic code](https://github.com/driftyco/ionic-code) but didn’t know where it was published 🙂

---

<div class="post-metadata">

**Author:** ![Neonic1](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/neonic1/32/113388_2.png) [@Neonic1](https://forum.ionicframework.com/u/Neonic1)\
**Post date:** [June 28, 2016, 6:46am UTC](https://forum.ionicframework.com/t/any-modal-examples-demos/1350/9 "2016-06-28T06:46:22Z")

</div>

Hi,  
I been working with Ionic for a while now but I’m still a bit of a noob because I don’t really fancy Angular.

So, I got this for my popup but it’s displaying a black screen when transitioning the slide up and down.

How can one fix this so it’s a transparent background as suppose to be and in the provided example?

My Transition:

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/1/1/11af77005bd44b91d4254a391429d6857e95bb31.png)