# Custom Dialog or Modal

**URL:** <https://forum.ionicframework.com/t/custom-dialog-or-modal/210360>\
**Category:** Capacitor\
**Created:** [May 31, 2021, 7:03am UTC](https://forum.ionicframework.com/t/custom-dialog-or-modal/210360 "2021-05-31T07:03:58Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![priyansh360](https://avatars.discourse-cdn.com/v4/letter/p/ed655f/32.png) [@priyansh360](https://forum.ionicframework.com/u/priyansh360)\
**Post date:** [May 31, 2021, 7:03am UTC](https://forum.ionicframework.com/t/custom-dialog-or-modal/210360/1 "2021-05-31T07:03:58Z")

</div>

Hii Guys,  
Hope Everyone is fine.  
I want to implement custom dialog or Modal in plain Capacitor App.  
Is their any plugin available for Capacitor App.

---

<div class="post-metadata">

**Author:** ![EinfachHans](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/einfachhans/32/130917_2.png) [@EinfachHans](https://forum.ionicframework.com/u/EinfachHans)\
**Post date:** [May 31, 2021, 7:04am UTC](https://forum.ionicframework.com/t/custom-dialog-or-modal/210360/2 "2021-05-31T07:04:27Z")

</div>

What do you mean with “Custom Dialog or Modal”?

---

<div class="post-metadata">

**Author:** ![priyansh360](https://avatars.discourse-cdn.com/v4/letter/p/ed655f/32.png) [@priyansh360](https://forum.ionicframework.com/u/priyansh360)\
**Post date:** [May 31, 2021, 8:15am UTC](https://forum.ionicframework.com/t/custom-dialog-or-modal/210360/3 "2021-05-31T08:15:58Z")

</div>

Through Custom dialog & Modal , i mean as we have modals like Alert,Confirm.  
The same way , we can design custom html page and show as a popup inside the App

---

<div class="post-metadata">

**Author:** ![GHChrisSu](https://avatars.discourse-cdn.com/v4/letter/g/77aa72/32.png) [@GHChrisSu](https://forum.ionicframework.com/u/GHChrisSu)\
**Post date:** [February 4, 2022, 3:01am UTC](https://forum.ionicframework.com/t/custom-dialog-or-modal/210360/4 "2022-02-04T03:01:09Z")

</div>

@priyansh360 Have you get a solution for this?

---

<div class="post-metadata">

**Author:** ![mariusbolik](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mariusbolik/32/147773_2.png) [@mariusbolik](https://forum.ionicframework.com/u/mariusbolik)\
**Post date:** [February 4, 2022, 9:05am UTC](https://forum.ionicframework.com/t/custom-dialog-or-modal/210360/5 "2022-02-04T09:05:53Z")

</div>

You can use a Modal for this:

```auto
  async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      id: 'alert-modal'
    });
    return await modal.present();
  }

```

Place this in your global.scss:

```css
#alert-modal {
  --max-width: 380px;
  --max-height: 450px;
  .modal-wrapper {
    border-radius: 20px;
  }
}

```

Example:

 ![IMG_2627.PNG](https://global.discourse-cdn.com/ionicframework/original/3X/3/0/300e78affdfa550172162fa31cb8e42f469d4847.jpeg)

More info: [ion-modal: Ionic Mobile App Custom Modal API Component](https://ionicframework.com/docs/api/modal)

---

<div class="post-metadata">

**Author:** ![rabellinonico](https://avatars.discourse-cdn.com/v4/letter/r/e99b99/32.png) [@rabellinonico](https://forum.ionicframework.com/u/rabellinonico)\
**Post date:** [February 15, 2024, 11:48am UTC](https://forum.ionicframework.com/t/custom-dialog-or-modal/210360/6 "2024-02-15T11:48:18Z")

</div>

Hey marius, thanks for the code above, may i ask for the html code please?

Kind regards