el-dialog is blocked, not at the top level, z-index: 999 is invalid

After setting:visible.sync="dialogVisible", el-dialog is displayed, but it is not placed on the top level, but is blocked by the mask layer.

Even after adding style: "z-index:999", it still cannot be placed at the top

The reason for this status:

You can check our code layout style. In the outer div of the dialog component, we set the position:absolute attribute. This attribute causes the mask layer to be on top.

Solution:

Add this code to the dialog component: append-to-body="true"; or: modal-append-to-body="false" to solve this problem.

<el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      :append-to-body='true'
      width="30%">
      <span>
        <el-form
          :rules="changeRules"
          ref="changeForm"
          :model="changeForm"
        >
          <el-form-item prop="phone">
            <el-row :gutter="10">
               <el-col :span="24">
                 <el-input v-model="changeForm.phone" placeholder="请输入要修改的手机号"></el-input>
               </el-col>
            </el-row>
          </el-form-item>
          <el-form-item prop="regCode">
            <el-row>
            <el-col :span="18">
                 <el-input v-model="changeForm.regCode" placeholder="请输入验证码"></el-input>
               </el-col>
              <el-col :span="6">
                 <el-button type="text" @click="changePhone" :disabled="codeDisable">{
    
    {
    
     msg }}</el-button>
               </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-row :gutter="10" v-if="changeState">
             <el-col :span="6">
               <span style="color:red">*验证码错误</span>
             </el-col>
            </el-row>
          </el-form-item>

        </el-form>

      </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="modifyMobilePhoneNumber">确 定</el-button>
  </span>
    </el-dialog>