---
title: 在fixed弹窗中滚动
order: 7
---
带有遮罩的弹层。
```jsx
import { useState, useRef } from 'react';
import Overlay from '@alifd/overlay';
const { Popup } = Overlay;
const style = {
width: 400,
height: 150,
padding: 10,
background: '#fff',
borderRadius: 2,
boxShadow: '2px 2px 20px rgba(0, 0, 0, 0.15)',
};
const Demo = () => {
const [visible, setVisible] = useState(false);
const [visible2, setVisible2] = useState(false);
const [position, setPosition] = useState({});
const [position2, setPosition2] = useState({});
const [position3, setPosition3] = useState({});
const dialogRef = useRef(null);
const onClose = (e) => {
console.log(/onclick/, e.target);
if (dialogRef.current && dialogRef.current.contains(e.target)) {
return;
}
setVisible(false);
};
const onClose2 = (e) => {
setVisible2(false);
};
return (
{/*
left: {position3.left} top: {position3.top}}
onPosition={({style}) => setPosition3(style)}
>
*/}
{position.transform}}
onPosition={({ style }) => setPosition(style)}
>
{position2.transform}}
onPosition={({ style }) => setPosition2(style)}
>
);
};
ReactDOM.render(, mountNode);
```