react模态框周围不可点击且透明
时间: 2023-07-11 17:42:25 浏览: 137
在 React 中实现模态框周围不可点击且透明,可以使用 CSS 来实现。具体实现方式如下:
1. 为模态框容器添加一个背景层,设置其为半透明并占据整个页面,这样可以实现模态框周围透明的效果。
2. 为背景层添加一个事件处理器,阻止鼠标事件冒泡,这样点击背景层时事件不会传递到下层的元素。
下面是一个示例代码:
```jsx
import React, { useState } from 'react';
import Modal from 'react-modal';
import './Modal.css';
Modal.setAppElement('#root');
function Example() {
const [modalIsOpen, setModalIsOpen] = useState(false);
function openModal() {
setModalIsOpen(true);
}
function closeModal() {
setModalIsOpen(false);
}
return (
<div>
<button onClick={openModal}>Open Modal</button>
<<div className={`modal-overlay ${modalIsOpen ? 'show' : ''}`} onClick={closeModal}></div>
<Modal isOpen={modalIsOpen} onRequestClose={closeModal}>
<h2>Modal Title</h2>
<p>Modal Body</p>
<button onClick={closeModal}>Close Modal</button>
</Modal>
</div>
);
}
```
在上面的代码中,我们在模态框外层添加了一个 `div` 元素作为背景层,并为其添加了 `modal-overlay` 的 CSS 类。在 CSS 中,我们可以为该类设置以下样式:
```css
.modal-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.modal-overlay.show {
visibility: visible;
opacity: 1;
}
.modal-overlay:hover {
cursor: pointer;
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
```
在上面的 CSS 样式中,我们使用了 `visibility` 和 `opacity` 属性来实现背景层的显示和隐藏,使用了 `transition` 属性来实现渐变效果,使用了 `:hover` 伪类来设置鼠标指针的样式。同时,我们也为模态框容器添加了一些基本的样式。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![dmg](https://img-home.csdnimg.cn/images/20210720083646.png)