z 索引 1 不会阻止模式下推索引 0 内容

Question

大家好，我有一个我制作的模态框，我将它的 z-index 设置为 1，其内部的组件的 z-index 为 0，但是模态框仍然会拉伸组件弹出，即使它位于内容之上，如下图所示

我想在不向下拉伸此组件的情况下制作模态叠加层，因为它会向下推所有我想避免的其他内容我不确定完成此操作的最佳方法，因为紫色的组件被重复使用跨越我的`vue 路由器内的多个视图。我将展示我的组件的代码 :) 任何有关如何实现此目的的建议都将受到赞赏

<template>
<div id="topbarContainer" v-bind:class="{ modalbackground: modal }">
<!-- TOPBAR -->
    <div class="topbar">

      <h6 id="dashboard">{{name}}</h6>

      <div class="searchContainer">
        <b-icon-search></b-icon-search>
        <small>search</small>
        <input class="searchbar" type="text" />
        <small class="searchbtn">H</small> 
      </div>
     
     <div id="topbarRightdiv">
      <img class="topbarButtons" src="../assets/superdash/chat-1.png" width="30px" height="30px" />
      <img class="topbarButtons" src="../assets/superdash/notifications.png" width="30px" height="30px" />
      <img class="topbarButtons" src="../assets/superdash/photo.png" width="30px" height="30px" />
      <p id="profileName" @click="showModal">Hemlin <small id="profileArrow">&#x25BC;</small></p>
    </div>

<!--modal -->

  <div  v-if="this.modal==true" class="modal-content">
      
        <section class="modalSection ModalsectionHeader">
        <img class="modalImg" src="../assets/topbar/profile_icons-2.svg"/> <p id="darkmodeText">Dark Mode</p> <img class="modalImg" src="../assets/topbar/togle.svg" @click="toggleDarkmode" v-if="darkmode==true"/> <img class="modalImg" src="../assets/topbar/togle.svg" @click="toggleDarkmode" v-if="darkmode==false"/> 
        </section>
        <section class="modalSection">
          <img class="modalImg" src="../assets/topbar/profile_icons.svg"/> <p>Profile</p> <small>&#62;</small>
        </section>
        <section class="modalSection">
          <img class="modalImg" src="../assets/topbar/profile_icons-1.svg"/> <p>Wallet</p> <small>&#62;</small>
        </section>
        <section class="modalSection">
          <img class="modalImg" src="../assets/topbar/profile_icons-3.svg"/> <p>Saved</p> <small>&#62;</small>
        </section>
        <section class="modalSection">
          <img class="modalImg" src="../assets/topbar/profile_icons-4.svg"/> <p>Get Reports</p> <small>&#62;</small>
        </section>

    </div>
      
    </div>
<!-- TOPBAR -->
</div>
</template>

<script>
export default {
  name: 'Topbar',
  props: ['name'],
  
  data:function(){
  return{
    modal: false,
    darkmode: false,
  }
},
methods:{
    showModal(){
      console.log("clicked")
      this.modal = !this.modal
    }
    ,toggleDarkmode(){
      console.log('darkmode')
      this.darkmode = !this.darkmode
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#topbarContainer{
  z-index: 0;
}
.modalbackground{
  background-color: rgba(128, 0, 128, 0.555);
}
.topbar{
  display: flex;
  font-size: 12px;
  font-family: 'Noto Sans JP', sans-serif;
}
#topbarRightdiv{
display: flex;
margin-left: 9em;
}

#topbarRightdiv p{
display: flex;
}

#profileName{
 font-size:14px;
 padding-top: 1em;
}
#profileName:hover{
 cursor: pointer;
}
#profileArrow{
  color: #39b3fac5;
}
#profileArrow:hover{
  color: #39d3fa;
  cursor: pointer;
}

#dashboard{
  margin-top: 1em;
  padding-left: 1em;
  margin-right: 5em;
}

.searchContainer{
 margin-top:1em;
 margin-left: 1em;
 margin-right:3em;
 width: 60%;
 border-style: none;
 border-radius: 13px;
 background-color: white;
 height: 2em;
 box-shadow: 0 1px 2px #88888877;
}

.searchbar{
  border-style: none;
  border-radius: 13px;
  width: 85%;
  padding-right: 1em;
}
.searchbtn{
  margin-left: .5em;
  color: rgb(73, 79, 90);
  border-left: 1px rgb(185, 187, 204) solid;
  padding-left:1em;
}

.topbarButtons{
 margin: 1em;
 border-radius: 100%;
 background-color: #87b9fa1a;
}






/* Modal Content/Box */
.modal-content {
  z-index: 1;
  position: relative;
  right: 50px;
  width: 30em;
  height: 20em;
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
}
.modalSection{
  padding-top: .5em;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.ModalsectionHeader{
  padding-bottom: 1em;
  margin-bottom: 1em;
 border-bottom: 1px solid rgba(97, 95, 95, 0.267);
}
#darkmodeText{
  margin: .2em
}
.modalImg{
  width: 25px;
  height: 25px;
}
/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


</style>

Answer 1

您在编写 toggleDarkMode() 时出错，您编写了 ,toggleDarkMode()。将逗号 (,) 上移。

Answer 2

尝试将位置更改为绝对位置：

.modal-content {
  z-index: 1;
  position: relative; <---HERE to absolute

new Vue({
  el:'#demo',
  props: ['name'],
  
  data:function(){
  return{
    modal: false,
    darkmode: false,
  }
},
methods:{
    showModal(){
      console.log("clicked")
      this.modal = !this.modal
    },
    toggleDarkmode(){
      console.log('darkmode')
      this.darkmode = !this.darkmode
    }
  }
})

#topbarContainer{
  z-index: 0;
}
.modalbackground{
  background-color: rgba(128, 0, 128, 0.555);
}
.topbar{
  display: flex;
  font-size: 12px;
  font-family: 'Noto Sans JP', sans-serif;
}
#topbarRightdiv{
display: flex;
margin-left: 9em;
}

#topbarRightdiv p{
display: flex;
}

#profileName{
 font-size:14px;
 padding-top: 1em;
}
#profileName:hover{
 cursor: pointer;
}
#profileArrow{
  color: #39b3fac5;
}
#profileArrow:hover{
  color: #39d3fa;
  cursor: pointer;
}

#dashboard{
  margin-top: 1em;
  padding-left: 1em;
  margin-right: 5em;
}

.searchContainer{
 margin-top:1em;
 margin-left: 1em;
 margin-right:3em;
 width: 60%;
 border-style: none;
 border-radius: 13px;
 background-color: white;
 height: 2em;
 box-shadow: 0 1px 2px #88888877;
}

.searchbar{
  border-style: none;
  border-radius: 13px;
  width: 85%;
  padding-right: 1em;
}
.searchbtn{
  margin-left: .5em;
  color: rgb(73, 79, 90);
  border-left: 1px rgb(185, 187, 204) solid;
  padding-left:1em;
}

.topbarButtons{
 margin: 1em;
 border-radius: 100%;
 background-color: #87b9fa1a;
}






/* Modal Content/Box */
.modal-content {
  z-index: 1;
  position: absolute;
  right: 50px;
  width: 30em;
  height: 20em;
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;

}
.modalSection{
  padding-top: .5em;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.ModalsectionHeader{
  padding-bottom: 1em;
  margin-bottom: 1em;
 border-bottom: 1px solid rgba(97, 95, 95, 0.267);
}
#darkmodeText{
  margin: .2em
}
.modalImg{
  width: 25px;
  height: 25px;
}
/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="demo">
<div id="topbarContainer" v-bind:class="{ modalbackground: modal }">
<!-- TOPBAR -->
    <div class="topbar">

      <h6 id="dashboard">{{name}}</h6>

      <div class="searchContainer">
        <b-icon-search></b-icon-search>
        <small>search</small>
        <input class="searchbar" type="text" />
        <small class="searchbtn">H</small> 
      </div>
     
     <div id="topbarRightdiv">
      <img class="topbarButtons" src="https://picsum.photos/30" width="30px" height="30px" />
      <img class="topbarButtons" src="https://picsum.photos/30" width="30px" height="30px" />
      <img class="topbarButtons" src="https://picsum.photos/30" width="30px" height="30px" />
      <p id="profileName" @click="showModal">Hemlin <small id="profileArrow">&#x25BC;</small></p>
    </div>

<!--modal -->

  <div  v-if="this.modal==true" class="modal-content">
      
        <section class="modalSection ModalsectionHeader">
        <img class="modalImg" src="https://picsum.photos/30"/> <p id="darkmodeText">Dark Mode</p> <img class="modalImg" src="https://picsum.photos/30" @click="toggleDarkmode" v-if="darkmode==true"/> <img class="modalImg" src="https://picsum.photos/30" @click="toggleDarkmode" v-if="darkmode==false"/> 
        </section>
        <section class="modalSection">
          <img class="modalImg" src="https://picsum.photos/30"/> <p>Profile</p> <small>&#62;</small>
        </section>
        <section class="modalSection">
          <img class="modalImg" src="https://picsum.photos/30"/> <p>Wallet</p> <small>&#62;</small>
        </section>
        <section class="modalSection">
          <img class="modalImg" src="https://picsum.photos/30"/> <p>Saved</p> <small>&#62;</small>
        </section>
        <section class="modalSection">
          <img class="modalImg" src="https://picsum.photos/30"/> <p>Get Reports</p> <small>&#62;</small>
        </section>

    </div>
      
    </div>
<!-- TOPBAR -->
</div>
</div>

z 索引 1 不会阻止模式下推索引 0 内容

z index 1 doesn't stop modal from pushing down index 0 content

javascript

css

vue.js

vuejs2

simplemodal