twitter-bootstrap - React-Bootstrap 多模态

Question

我在我的项目中使用 React-bootstrap。
我需要打开多个对话框。
有什么办法可以做到这一点？

笔记:
有 Bootstrap 的答案here但它在 react-bootstrap 中不起作用。
谢谢。

Answer 1

如果您使用 scss 作为 css 预处理器，那么您可以使用循环来定义正确的 z-index是为了让一切看起来都像一个顶部。
此循环最多可处理 5 个级别，您可以根据需要增加数量

@for $i from 1 through 6 {
  $zIndexBackdrop:  #{1000 + (5 * $i)};
  $zIndexContent:  #{1000 + (5 * $i) + 2};
  .modal-backdrop.show:nth-of-type(#{$i}) {
    z-index: $zIndexBackdrop;
  }
  div[role="dialog"][aria-modal="true"]:nth-of-type(#{$i}) {
    z-index: $zIndexContent;
  }
}

这里的循环 1 through 6循环 5 次，如果需要，可以通过增加次数来增加模态的深度。
我使用了 react-bootstrap 使用的通用类名模态，请对背景和主要模态的创建方式进行交叉检查。