VueJS模态框显示但被遮罩遮挡，无法交互求助

我来帮你排查这个模态框被遮罩层挡住、无法交互的问题，结合你的代码来看，大概率是层级设置、HTML结构错误或者Bootstrap与Vue的交互冲突导致的，给你几个针对性的解决办法：

1. 先修正模态框的HTML结构（最容易忽略的问题） #

你的模态框把modal-footer嵌套在了modal-body里面，这不符合Bootstrap模态框的标准结构，会导致渲染异常，甚至层级错乱。同时表格还缺少了<thead>标签，也需要补上：

<!-- 修正后的模态框结构 -->
<div class="modal fade" id="ver">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span>×</span>
        </button>
      </div>
      <div class="modal-body">
        <table class="table table-hover table-striped tabla-actuaciones">
          <!-- 补上thead包裹表头 -->
          <thead>
            <tr>
              <th>Fecha</th>
              <th>Tiempo Empleado</th>
              <th>Bono</th>
              <th>Tiempo Contratado </th>
              <th>Tiempo Restante</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="data in datosActuaciones" :key="data.codActuacion">
              <td>{{ data.fecha }}</td>
              <td>{{ data.tiempoEmpleado }}</td>
              <td>{{ data.bono }}</td>
              <td class="tipoBono"></td>
              <td>{{ data.tiempoRestanteBono }}</td>
              <td><input type="hidden" id="asistencia" v-model="data.codAsistencia"></td>
            </tr>
          </tbody>
        </table>
        <span id="minutosActuaciones">0</span>:<span id="segundosActuaciones">0</span>
      </div>
      <!-- 把footer移到modal-content下，和header、body同级 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" @click="iniciarActuacionConActuaciones">Iniciar Actuacion</button>
        <button type="button" class="btn btn-primary" @click="detenerActuacionConActuaciones">Detener Actuacion</button>
      </div>
    </div>
  </div>
</div>

2. 把模态框移到组件根元素的最外层 #

你的模态框现在嵌套在多个带有offset-md-3、d-flex的父元素里，如果这些父元素设置了position: relative或自定义z-index，会限制模态框的层级，导致它被遮罩层挡住。

修改模板结构，把模态框直接放在根<div>的最后：

<template>
  <div class="">
    <!-- 你的搜索栏和表格部分 -->
    <div class="d-flex">...</div>
    <div class="d-flex tabla-resultado offset-md-3 mt-3">...</div>
    
    <!-- 模态框移到这里，作为根元素的直接子元素 -->
    <div class="modal fade" id="ver">...</div>
  </div>
</template>

3. 解决Bootstrap与Vue的交互冲突 #

你同时用了Bootstrap的data-toggle="modal"和Vue的@click事件，两种方式可能会导致模态框初始化不同步。建议改用Vue手动控制模态框显示：

• 首先在data里添加控制变量：

data() {
  return {
    datosAsistencia: [],
    datosActuaciones: [],
    showModal: false
  };
},

• 修改触发按钮，去掉data-toggle和data-target：

<td><a href="#" class="btn btn-info" @click="visualizarActuaciones(data.codAsistencia)">Actuaciones</a></td>

• 在获取数据后手动打开模态框：

visualizarActuaciones: function(codAsistencia){
  let url = "/getActuaciones";
  axios
    .post(url, { codAsistencia: codAsistencia } )
    .then((response) => {
      this.datosActuaciones = response.data;
      // 用jQuery手动调用Bootstrap模态框方法
      $('#ver').modal('show');
    })
    .catch((error) => console.log(error));
},

4. 强制设置模态框的层级（兜底方案） #

如果上面的方法都没解决，直接给模态框和遮罩层设置更高的z-index：

<style scoped>
/* 注意如果用scoped，需要用深度选择器 */
::v-deep #ver {
  z-index: 9999 !important;
}
::v-deep .modal-backdrop {
  z-index: 9998 !important;
}
</style>

按这个顺序排查，先修正结构，再调整位置，最后处理交互和层级，应该就能解决模态框被遮罩层挡住的问题了。

内容的提问来源于stack exchange，提问作者scorpions