how to teleport component in quasar(vue3) to the fullscreen?

I followed the teleport example(youtube video) and want to set the component to the fullscreen. However, the header and footer still show up when the component is teleported to body or #q-app. The only difference between my code and the example code is I use quasar layout. Not sure if that matters. here is my layout code:

<template>
  <q-layout view="hhh lpr fff">
    <q-header class="bg-white text-black" bordered reveal>
     ...
    </q-header>
    <q-page-container class="bg-grey-2">
      <router-view />
    </q-page-container>

    <q-footer class="bg-white text-black bordered reveal>
    ....
    </q-footer>
</template>

here is my component

<template>
  <teleport to="#q-app">
    <div class="modal">
      <h1>This is a modal</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae ipsa
        laboriosam vero natus ut rerum quaerat, saepe praesentium tempore et hic
        velit odio nemo minus labore quam ullam quod architecto?
      </p>
    </div>
  </teleport>
</template>

<script setup lang="ts"></script>

<style lang="scss">
.modal {
  background: beige;
  padding: 10px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
</style>

You need to set up in CSS z-index higher than your header and footer components. For example z-index: 100;.