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

Question

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>

Answer 1

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