React-JHipster中ReactStrap Popover覆盖Modal问题求助

我在使用ReactStrap开发时遇到一个问题：添加在Font Awesome图标上的Popover会覆盖弹出的Modal。

问题截图：

我的代码如下：

<details data-popover="right">
          <summary>
            <FontAwesomeIcon
              onClick={togglePopover}
              icon={faEllipsisVertical}
              style={{ color: '#d9d9d9' }}
              type="button"
              className="componente-boton circle-icon"
              id={'elipsis-icon'}
            />
          </summary>
          <Popover
            target="elipsis-icon"
            isOpen={popoverOpen}
            placement="bottom"
            trigger="hover"
            className="notificaciones-popover mi-popover"
          >
            <div>
              <ul className="list-group mb-0">
                <li className="list-group-item">
                  <p onClick={navToPath} style={{ cursor: 'pointer' }}>
                    Editar
                  </p>
                  <p onClick={toggleModal} style={{ cursor: 'pointer' }}>
                    Eliminar
                  </p>
                  <div className="mi-pagina-modal-modal">
                    <Modal isOpen={modal} toggle={toggleModal} className="mi-pagina-modal">
                      <ModalBody className="mi-pagina-modal-body">
                        <img src="../../../../content/images/alerta.png" alt="Alerta" className="mi-pagina-modal-img" />
                        <h5 className="mi-pagina-titulo-modal">Eliminar</h5>
                        <div className="mi-pagina-modal-texto">
                          <p>¿Estas seguro de eliminar “{blog.title}”?</p>
                        </div>
                        <Button onClick={toggleModal} className="mi-pagina-btn-modal back">
                          Cancelar
                        </Button>
                        <Button onClick={onDelete} className="mi-pagina-btn-modal submit">
                          Eliminar
                        </Button>
                      </ModalBody>
                    </Modal>
                  </div>
                </li>
              </ul>
            </div>
          </Popover>
        </details>

我期望激活Modal时，Popover能隐藏在Modal后方。

解决方案 #

方法1：打开Modal时同步关闭Popover #

点击“Eliminar”触发Modal的同时，直接关闭Popover，从根源避免层级冲突。修改toggleModal函数：

const toggleModal = () => {
  setModal(!modal);
  setPopoverOpen(false); // 强制关闭Popover
};

方法2：调整CSS层级 #

通过修改z-index让Modal层级高于Popover：

/* ReactStrap默认Popover z-index为1060，Modal为1050，需要调整Modal层级 */
.mi-pagina-modal {
  z-index: 1070 !important;
}

.mi-popover {
  z-index: 1040;
}

方法3：重构Modal位置（推荐） #

Modal属于全局层级组件，不应该嵌套在Popover内部，将Modal移到Popover外部：

<details data-popover="right">
  <summary>
    <FontAwesomeIcon
      onClick={togglePopover}
      icon={faEllipsisVertical}
      style={{ color: '#d9d9d9' }}
      type="button"
      className="componente-boton circle-icon"
      id={'elipsis-icon'}
    />
  </summary>
  <Popover
    target="elipsis-icon"
    isOpen={popoverOpen}
    placement="bottom"
    trigger="hover"
    className="notificaciones-popover mi-popover"
  >
    <div>
      <ul className="list-group mb-0">
        <li className="list-group-item">
          <p onClick={navToPath} style={{ cursor: 'pointer' }}>
            Editar
          </p>
          <p onClick={toggleModal} style={{ cursor: 'pointer' }}>
            Eliminar
          </p>
        </li>
      </ul>
    </div>
  </Popover>
</details>

{/* Modal移到Popover外部 */}
<div className="mi-pagina-modal-modal">
  <Modal isOpen={modal} toggle={toggleModal} className="mi-pagina-modal">
    <ModalBody className="mi-pagina-modal-body">
      <img src="../../../../content/images/alerta.png" alt="Alerta" className="mi-pagina-modal-img" />
      <h5 className="mi-pagina-titulo-modal">Eliminar</h5>
      <div className="mi-pagina-modal-texto">
        <p>¿Estas seguro de eliminar “{blog.title}”?</p>
      </div>
      <Button onClick={toggleModal} className="mi-pagina-btn-modal back">
        Cancelar
      </Button>
      <Button onClick={onDelete} className="mi-pagina-btn-modal submit">
        Eliminar
      </Button>
    </ModalBody>
  </Modal>
</div>

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