ionic 4 create custom ion-modal

I have create ionic 4 custom modal popup. it is very simple you can follow the code

modal

modal.component.html
modal.component.scss
modal.component.spec.ts
modal.component.ts

Example images

 

<!-- Modal tigger code -->
<ion-button   class="button_transparent" (click)="sampleModal()"> ADD ACTIVITY</ion-button> 
async sampleModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
    });
    return await modal.present();
  }

Step 1 : modal.component.html code
<div class="modal_center">   

<div class="modla_c">

   <div class=""> <h5>Add Note</h5> 

    <ion-button size="medium" color="light" (click)="dismiss()" class="close_p"><ion-icon name="close"></ion-icon></ion-button>

  </div>

  <div class="">

    <ion-item lines="none" class="item_foc">

      <ion-label position="stacked">Choose calendar</ion-label>

      <ion-select [interfaceOptions]="customAlertOptions" interface="alert" placeholder="Activity Duration">

        <ion-select-option value="bacon">January</ion-select-option>

        <ion-select-option value="olives">February</ion-select-option>

        <ion-select-option value="xcheese">March</ion-select-option>

        <ion-select-option value="peppers">April</ion-select-option>

      </ion-select>

    </ion-item>

    <ion-item lines="none" class="item_foc">

        <ion-label position="stacked">Write comment</ion-label>

      <ion-textarea ></ion-textarea>

    </ion-item>

    <ion-button class="payment_btn" expand="block" color="tertiary" size="medium" shape="round">Add New</ion-button>

  </div>

  </div>

  </div>

Step: 2 : modal.component.scss - You can put the css style global.scss or modal.component.scss

<style>  
.modal_center{
  width:100%;
  height:100%;
  display: flex;
  align-items: center;
}
.modla_c{
  width: 90%;
  background: #ffffff;
  position: relative;
  -webkit-box-align: center;
  align-items: center;
  border-radius: 8px;
  margin: 0 auto;
  padding: 16px;
}
.modla_c .close_p{
  position: absolute;
  top: 0;
  right: 0;
  font-weight: normal;
}
.modla_c ion-button.close_p{
  --ion-color-base: transparent !important;
  --ion-color-contrast: #999 !important;
  --box-shadow: none;
}
.modla_c h5{
  margin-bottom: 20px;
    margin-top: 0;

}
</style>
Step: 3 :  You must include (global.scss) , Because Background white to transparent changed.  if you are required
.sc-ion-modal-md-h{
    --background: transparent !important;

  }