首页react-modal 模态框只显示框，周围变透明

react-modal 模态框只显示框，周围变透明

时间: 2023-08-21 21:02:51 浏览: 157

如果你想要将 `react-modal` 模态框之外的区域变成透明，并只显示一个框，你可以使用 `overlayClassName` 属性和一些 CSS 样式。首先，你需要在 `overlayClassName` 属性中指定一个自定义的类名，例如 `custom-overlay`： ```jsx <Modal isOpen={modalIsOpen} onRequestClose={closeModal} overlayClassName="custom-overlay" > {/* 模态框的内容 */} </Modal> ``` 然后，在 CSS 样式表中，你可以为 `custom-overlay` 类名设置样式，将其背景设置为透明，同时使用 `:before` 伪元素来显示一个框： ```css .custom-overlay { background-color: rgba(0, 0, 0, 0.5); } .custom-overlay:before { content: ""; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: 300px; border: 1px solid #ccc; background-color: #fff; z-index: 99; } ``` 在上面的样式中，我们首先将 `custom-overlay` 的背景设置为半透明的黑色，这样就可以将模态框之外的区域变为透明。然后，我们使用 `:before` 伪元素来显示一个框。将 `content` 的值设置为空，这样就不会显示任何内容。使用 `position: fixed` 将框固定在页面上，并将 `top` 和 `left` 设置为 `50%`，将框居中。使用 `transform` 属性微调框的位置。将框的宽度和高度设置为你想要的大小，可以根据需要进行调整。将 `border` 设置为 1px 的灰色，使框更加明显。将 `background-color` 设置为白色，使框的内部变为白色。最后，将 `z-index` 设置为 99，使框显示在最上层。这样，你就可以在 `react-modal` 的模态框之外显示一个透明的区域，并在其中只显示一个框了。

阅读全文