Ionic modal help need sample code

Ionic Framework ionic-v3
1

Hi I want create modal but customize that size. any one suggest some sample codes. modal same likes alert box.share anyone.

2

Instead of using ionic pre-built modal dialog (poorly customizable), I would recommend you to try out the regular HTML dialog component which is super easy to implement and tweak it as how you want to. Another thing is that the HTML dialog basically still stay on the same DOM with your current view which is another plus regarding controlling the logic flow and storing/passing data.

3

can u provide any sample for this @hn162

4

Sure, there are 2 steps involving this process:

  1. create your dialog (or modal) in your page html file like this, style it with css however you like and notice that you also need a “close” button too:
 <dialog  id="adsModal" style="width: 100%; 
  height: 100%;
  top: 0;
  background-color: rgba(0, 0, 0, 0.4);
  border: 0;">
    <ion-grid style="height: 100%">
      <ion-row justify-content-center align-items-center style="height: 100%;">
        <ion-card style="border-radius: 15px; position: relative" >
          <div style="height:5px; background: repeating-linear-gradient(
                90deg,
                #7183f7,
                #fa7777,
                #fff78d,
                #a1fad5
              );">
          </div>
          <button style="position: absolute; top:2px; right:2px" id="adsModalCloseBtn" ion-button color="danger" (click)="closeAds()" icon-only>  <ion-icon name="close"></ion-icon>
          </button>
          <ion-card-content >
            <img src="{{popup.advertImage}}" style="margin-bottom: 8px" />
           
            <p class="bannerText" style="background: white !important; color:black !important">
                <span style="margin-bottom:5px"><b>Ngày hiệu lực: </b>{{convertMillitoDate(popup.advertStartDate)}} - {{convertMillitoDate(popup.advertEndDate)}}</span>
                <br>
                {{popup.advertContent}}
              </p>
          </ion-card-content>

        </ion-card>
      </ion-row>
    </ion-grid>
  </dialog>
  1. In your ts file, wait for your DOM to fully load and attach the dialog to a variable so you can control it.
ionViewDidLoad() {
        this.adsModal = document.getElementById('adsModal') as HTMLElement;
    }
closeAds() {
        this.adsModal.close()
    }
showModals()
{ 
    this.adsModal.showModal();
}