页面加载时Modal弹窗出现无法关闭的灰色遮罩问题求助

使用Bootstrap 4.5.3搭配jQuery 3.6.3实现页面加载时自动弹出Modal窗口，出现以下异常：

• Modal弹窗可正常显示，但伴随覆盖整个页面的灰色遮罩
• 遮罩无法关闭，导致Modal交互失效

自定义Modal的参考CSS代码如下：

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 50%; /* Could be more or less, depending on screen size */
}

将自定义Modal的z-index值从1修改为2000即可解决问题，调整后的CSS代码如下：

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 2000; /* 提升层级，避免被Bootstrap默认遮罩层覆盖 */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 50%; /* Could be more or less, depending on screen size */
}

原因分析：Bootstrap自带的Modal遮罩层（.modal-backdrop）默认z-index高于1，自定义Modal的z-index设置过低会被遮罩层完全覆盖，导致无法点击关闭按钮。调高z-index后，Modal能正常显示在遮罩层上方，恢复可关闭及交互功能。

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