# Modal wont open

**URL:** <https://forum.ionicframework.com/t/modal-wont-open/45189>\
**Category:** ionic-v3\
**Created:** [March 1, 2016, 3:23pm UTC](https://forum.ionicframework.com/t/modal-wont-open/45189 "2016-03-01T15:23:40Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lindstron1988](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/lindstron1988/32/97505_2.png) [@Lindstron1988](https://forum.ionicframework.com/u/Lindstron1988)\
**Post date:** [March 1, 2016, 3:23pm UTC](https://forum.ionicframework.com/t/modal-wont-open/45189/1 "2016-03-01T15:23:40Z")

</div>

Hi I am having problems getting a modal component to work, I know there are some change that could have broken it but the path to the Modal class is correct so it should work?  
I am importing my modal page rather than having it in the same file I am calling it from if that makes a difference?

```auto
import {Page, Platform, Modal, NavController, NavParams} from 'ionic-framework/ionic';
import {LoginPage} from '../login-page/login-page';

export class HomePage {
	...

	constructor(private platform: Platform, private nav: NavController, navParams: NavParams) {
		this.nav = nav;
                ...
	}

showModal() {
		let modal = Modal.create(LoginPage);
		this.nav.present(modal)
	}
}

```

---

<div class="post-metadata">

**Author:** ![richardshergold](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/richardshergold/32/91823_2.png) [@richardshergold](https://forum.ionicframework.com/u/richardshergold)\
**Post date:** [March 1, 2016, 3:38pm UTC](https://forum.ionicframework.com/t/modal-wont-open/45189/2 "2016-03-01T15:38:02Z")

</div>

Presumably you are calling the showModal function somewhere?

---

<div class="post-metadata">

**Author:** ![Lindstron1988](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/lindstron1988/32/97505_2.png) [@Lindstron1988](https://forum.ionicframework.com/u/Lindstron1988)\
**Post date:** [March 1, 2016, 3:39pm UTC](https://forum.ionicframework.com/t/modal-wont-open/45189/3 "2016-03-01T15:39:00Z")

</div>

Hi, yes with a button on my homePage.html i stuck a console log in the showModal function to be sure it’s getting called too.

---

<div class="post-metadata">

**Author:** ![richardshergold](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/richardshergold/32/91823_2.png) [@richardshergold](https://forum.ionicframework.com/u/richardshergold)\
**Post date:** [March 1, 2016, 3:44pm UTC](https://forum.ionicframework.com/t/modal-wont-open/45189/4 "2016-03-01T15:44:18Z")

</div>

and if you log a message from the constructor of LoginPage you see nothing?

---

<div class="post-metadata">

**Author:** ![Lindstron1988](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/lindstron1988/32/97505_2.png) [@Lindstron1988](https://forum.ionicframework.com/u/Lindstron1988)\
**Post date:** [March 1, 2016, 3:49pm UTC](https://forum.ionicframework.com/t/modal-wont-open/45189/5 "2016-03-01T15:49:43Z")

</div>

Thats Right nothing coming through, I did have the LoginPage as part of my main navigation but even when taken out it doesn’t work, I’ve also tried importing other pages, do I need to import something in my app.ts?

---

<div class="post-metadata">

**Author:** ![richardshergold](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/richardshergold/32/91823_2.png) [@richardshergold](https://forum.ionicframework.com/u/richardshergold)\
**Post date:** [March 1, 2016, 4:20pm UTC](https://forum.ionicframework.com/t/modal-wont-open/45189/6 "2016-03-01T16:20:07Z")

</div>

Does your modal template start and end with ion-content ?

---

<div class="post-metadata">

**Author:** ![richardshergold](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/richardshergold/32/91823_2.png) [@richardshergold](https://forum.ionicframework.com/u/richardshergold)\
**Post date:** [March 1, 2016, 4:25pm UTC](https://forum.ionicframework.com/t/modal-wont-open/45189/7 "2016-03-01T16:25:38Z")

</div>

you don’t actually need the line

`this.nav = nav;`

and you also have a semi-colon missing from the last line.

Looks like it should work though?

---

<div class="post-metadata">

**Author:** ![Lindstron1988](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/lindstron1988/32/97505_2.png) [@Lindstron1988](https://forum.ionicframework.com/u/Lindstron1988)\
**Post date:** [March 1, 2016, 4:29pm UTC](https://forum.ionicframework.com/t/modal-wont-open/45189/8 "2016-03-01T16:29:50Z")

</div>

Yeah got I have the ion-content tags at start and end, semi-colon didn’t change anything either 😕

---

<div class="post-metadata">

**Author:** ![Lindstron1988](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/lindstron1988/32/97505_2.png) [@Lindstron1988](https://forum.ionicframework.com/u/Lindstron1988)\
**Post date:** [March 1, 2016, 4:33pm UTC](https://forum.ionicframework.com/t/modal-wont-open/45189/9 "2016-03-01T16:33:47Z")

</div>

Also tried with and without  
`<ion-navbar *navbar>`

---

<div class="post-metadata">

**Author:** ![brandyshea](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/brandyshea/32/148286_2.png) [@brandyshea](https://forum.ionicframework.com/u/brandyshea)\
**Post date:** [March 2, 2016, 3:54am UTC](https://forum.ionicframework.com/t/modal-wont-open/45189/10 "2016-03-02T03:54:55Z")

</div>

Do you have an `ion-nav` element? Also, can you paste the output of `ionic info` from within the project please?

---

<div class="post-metadata">

**Author:** ![Lindstron1988](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/lindstron1988/32/97505_2.png) [@Lindstron1988](https://forum.ionicframework.com/u/Lindstron1988)\
**Post date:** [March 2, 2016, 9:14am UTC](https://forum.ionicframework.com/t/modal-wont-open/45189/11 "2016-03-02T09:14:49Z")

</div>

No I have this inside my modal component, I’m using tabs.

```auto
<ion-navbar *navbar>
  <ion-title>Login Page</ion-title>
</ion-navbar>

```

ionic info gives me this

```auto
Cordova CLI: 6.0.0
Gulp version: CLI version 3.9.0
Gulp local:
Ionic Version: 2.0.0-beta.1
Ionic CLI Version: 2.0.0-beta.18
Ionic App Lib Version: 2.0.0-beta.9
ios-deploy version: 1.8.4
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v5.4.1
Xcode version: Xcode 7.2.1 Build version 7C1002

```

I spun up a new tabs project and tried it in there and it works fine, is it because I’m building on top of the tutorial template?

---

<div class="post-metadata">

**Author:** ![brandyshea](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/brandyshea/32/148286_2.png) [@brandyshea](https://forum.ionicframework.com/u/brandyshea)\
**Post date:** [March 2, 2016, 3:48pm UTC](https://forum.ionicframework.com/t/modal-wont-open/45189/12 "2016-03-02T15:48:12Z")

</div>

## JavaScript

I created a new project based on the tutorial starter:

```auto
$ ionic start tutorialModalTest tutorial --v2
$ cd tutorialModalTest/
$ ionic serve

```

Added the following button to `hello-ionic.html`:

```auto
<p>
  <button secondary (click)="openModal()">Open Modal</button>
</p>

```

Modified `hello-ionic.js` to this:

```auto
import {Page, NavController, Modal} from 'ionic-angular';
import {ListPage} from '../list/list';

@Page({
  templateUrl: 'build/pages/hello-ionic/hello-ionic.html'
})
export class HelloIonicPage {
  static get parameters() {
    return [[NavController]];
  }

  constructor(nav) {
    this.nav = nav;
  }

  openModal() {
    let modal = Modal.create(ListPage);
    this.nav.present(modal);
  }

}

```

## Typescript

```auto
$ ionic start tutorialModalTestTs tutorial --v2 --ts
$ cd tutorialModalTestTs/
$ ionic serve

```

Added button to `hello-ionic.html`:

```auto
<p>
  <button secondary (click)="openModal()">Open Modal</button>
</p>

```

Modified `hello-ionic.ts` to this:

```auto
import {Page, NavController, Modal} from 'ionic-angular';
import {ListPage} from '../list/list';

@Page({
  templateUrl: 'build/pages/hello-ionic/hello-ionic.html'
})
export class HelloIonicPage {
  constructor(private nav: NavController) {

  }

  openModal() {
    let modal = Modal.create(ListPage);
    this.nav.present(modal);
  }

}

```

I am seeing a modal for both cases, but here is my ionic info:

```auto
Ionic Version: 2.0.0-beta.2
Ionic CLI Version: 2.0.0-beta.19

```

Could you try updating the CLI and then starting a new project and see if my steps above work?

`npm install -g ionic@beta`

---

<div class="post-metadata">

**Author:** ![Lindstron1988](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/lindstron1988/32/97505_2.png) [@Lindstron1988](https://forum.ionicframework.com/u/Lindstron1988)\
**Post date:** [March 3, 2016, 8:57am UTC](https://forum.ionicframework.com/t/modal-wont-open/45189/13 "2016-03-03T08:57:30Z")

</div>

Hi still didn’t work, perhaps it was that version of the tutorial kit?, I’ve since changed to a new instance of ionic and it works fine.

---

<div class="post-metadata">

**Author:** ![ryanlogsdon](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ryanlogsdon/32/103208_2.png) [@ryanlogsdon](https://forum.ionicframework.com/u/ryanlogsdon)\
**Post date:** [July 4, 2016, 10:00pm UTC](https://forum.ionicframework.com/t/modal-wont-open/45189/14 "2016-07-04T22:00:00Z")

</div>

@brandyshea, thanks for the walk through. It’s exactly what I was looking for!

---

<div class="post-metadata">

**Author:** ![cescoferraro](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/cescoferraro/32/100256_2.png) [@cescoferraro](https://forum.ionicframework.com/u/cescoferraro)\
**Post date:** [July 4, 2016, 11:39pm UTC](https://forum.ionicframework.com/t/modal-wont-open/45189/15 "2016-07-04T23:39:27Z")

</div>

check out the selector atribute of the component you are trying to present. Either none and selector: ‘ion-page’ have solved similar issues I have had before.

---

<div class="post-metadata">

**Author:** ![grandmaspizza](https://avatars.discourse-cdn.com/v4/letter/g/5daacb/32.png) [@grandmaspizza](https://forum.ionicframework.com/u/grandmaspizza)\
**Post date:** [March 26, 2021, 8:43pm UTC](https://forum.ionicframework.com/t/modal-wont-open/45189/16 "2021-03-26T20:43:31Z")

</div>

It’s 2021 and I am having the same issue with ionic 4. I was able to track down the problem to an import. When declaring a certain Component (Clipboard in my case: [@ionic-native/clipboard](https://ionicframework.com/docs/native/clipboard)) in the constructor the Modal doesn’t open. No error nothing. I also tried to inject the plugin with Injector, without success. Does someone have an idea what is going on here?

**Update** : Never mind… The problem was solved after I declared the Component in app.module.ts

```auto
Ionic:

   Ionic CLI : 5.4.16
   Ionic Framework : @ionic/angular 4.11.10
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics : 8.1.3
   @angular/cli : 8.1.3
   @ionic/angular-toolkit : 2.2.0

Cordova:

   Cordova CLI : 10.0.0
   Cordova Platforms : ios 5.1.1
   Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 17 other plugins)

Utility:

   cordova-res (update available: 0.15.3) : 0.15.2
   native-run (update available: 1.3.0) : 1.2.0

System:

   ios-deploy : 1.11.2
   ios-sim : 8.0.2
   NodeJS : v12.18.3 (/usr/local/bin/node)
   npm : 7.6.3
   OS : macOS
   Xcode : Xcode 12.4 Build version 12D4e

```

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 8:52pm UTC](https://forum.ionicframework.com/t/modal-wont-open/45189/17 "2021-07-19T20:52:00Z")

</div>