I have the ionic modal that is created using modal controller. When it opens, an extra blank screen is added in brackdrop
but I want to show a small pop up in the middle of screen like this using modal controller and blur the background on same screen like this

My code looks like this:

app.component.ts

async openModal() {
    const modal = await this.modalCtrl.create({
      component: DialogComponent,
      componentProps: {
        data: this.response
      },
    });
    modal.present();
  }

app.component.css

ion-modal#example-modal {
  --width: fit-content;
  --min-width: 250px;
  --height: fit-content;
  --border-radius: 6px;
  --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
}

ion-modal#example-modal h1 {
  margin: 20px 20px 10px 20px;
}

ion-modal#example-modal ion-icon {
  margin-right: 6px;

  width: 48px;
  height: 48px;

  padding: 4px 0;

  color: #aaaaaa;
}

ion-modal#example-modal .wrapper {
  margin-bottom: 10px;
}

Dialog.component.html

<ion-app>
  <ion-modal id="example-modal" #modal [isOpen]="showModal">
    <ng-template>
      <div class="wrapper">
        <h1>Dialog header</h1>

        <ion-list lines="none">
          <ion-item button="true" detail="false" (click)="dismiss()">
            <ion-icon name="person-circle"></ion-icon>
            <ion-label>Item 1</ion-label>
          </ion-item>
          <ion-item button="true" detail="false" (click)="dismiss()">
            <ion-icon name="person-circle"></ion-icon>
            <ion-label>Item 2</ion-label>
          </ion-item>
          <ion-item button="true" detail="false" (click)="dismiss()">
            <ion-icon name="person-circle"></ion-icon>
            <ion-label>Item 3</ion-label>
          </ion-item>
        </ion-list>
      </div>
    </ng-template>
  </ion-modal>
</ion-app>