Заранее спасибо за помощь.
Я обновлю этот пост с решением, потому что я думаю, что некоторые люди могут иметь такую же проблему, и после некоторого поиска в Интернете я не нашел ответа.
Проблема
Я использую модальный компонент в компоненте, включенном в мой App.vue.Все работает, кроме как с навигационной панелью, потому что, когда я помещаю мышь в окно, навигационная панель становится белой и проходит над черным фоном модала.
Вы можете видеть фронт на изображении ниже, когда мышь отсутствует.
// К сожалению, мне нужно 10 репутаций, чтобы добавить его.
Чтобы это исправитьЯ много чего перепробовал, но сейчас ничего не работает.Если я удаляю z-index: 1 из панели навигации, проблема устраняется, но если я размещаю на своем веб-сайте какой-либо шрифт с классным контентом, панель навигации будет отображаться позади.
css
nav {
display: flex;
background-color: #FFFFFF;
height: 50px;
position: sticky;
top: 0px;
z-index: 1;
}
.modal-mask {
position: fixed;
top: 0;
left:0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
}
.modal {
background-color: #FAFAFA;
display: flex;
flex-direction: column;
}
App.vue
<template>
<div id="app">
<NavBar></NavBar>
<router-view/>
</div>
</template>
<script>
import NavBar from './components/layout/Navbar'
export default {
components: {
NavBar
},
}
</script>
Модал
<template>
<div class="modal-mask">
<div class="modal"
role="dialog">
<slot name="body">
No content
</slot>
</div>
</div>
</template>
<script>
export default {
name: 'modal',
methods: {
close() {
this.$emit('close');
},
},
};
</script>