Modal: Outgray container page

[Luxaaa]

Hello!
I want to create a modal like this:

But My Modal does not outgray the backgroundpage:

My app.module.ts:

import { TabsPageModule } from './tabs/tabs.module';
import { HomePageModule } from './home/home.module';
import { TasksPageModule } from './tasks/tasks.module';
import { TasksPage } from './tasks/tasks.page';
import { HomePage } from './home/home.page';
import { TabsPage } from './tabs/tabs.page';
import { ModaltestPageModule } from './modaltest/modaltest.module';
import { ModaltestPage } from './modaltest/modaltest.page';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
      IonicModule.forRoot({mode: 'ios'}), 
      AppRoutingModule,
      ModaltestPageModule
  ],

  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

and my Tasks.page.ts (where the button is)

import { ModaltestPage } from './../modaltest/modaltest.page';
import { ActionSheetController, ModalController, PopoverController } from '@ionic/angular';
import { Component, OnInit } from '@angular/core';
import { AddTaskComponent } from '../add-task/add-task.component';


@Component({
  selector: 'app-tasks',
  templateUrl: './tasks.page.html',
  styleUrls: ['./tasks.page.scss'],
})
export class TasksPage implements OnInit {

  constructor(public modalCtrl : ModalController, public popoverCtrl : PopoverController) { }

  ngOnInit() {
  }

 
async showModal() {
    const modal = await this.modalCtrl.create({
      component : ModaltestPage,
      cssClass : "bottom_modal",
      showBackdrop: false
    });
  return await  modal.present();
  }
}

And the app.scss:

.bottom_modal {
    height: 30%;
    top: 70%;
    position: absolute;
    display: block;

}

Tahk you for help!