Recently, a project requirement is to click the question mark to display the prompt window. The window is fixed, does not scroll with the scroll bar, and can be dragged within the scope. It does not affect the lower form input.

I think of using anti card combined with react draggable. Record the implementation code here:

import React from 'react';
import { Modal, Button, Card, Icon } from 'antd';
import Draggable from 'react-draggable';

export default class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            cardShow: false,
            disabled: true,
            bounds: { left: 0, top: 0, bottom: 0, right: 0 }, // Initialize drag boundary
        };
        this.draggleRef = React.createRef();
    }

    onStart = (event, uiData) => {
        const { clientWidth, clientHeight } = window.document.documentElement;
        const targetRect = this.draggleRef.current.getBoundingClientRect();
        this.setState({
            // Set the drag boundary to limit the dragging distance from the top, bottom, left and right of the initial position, the following setting is draggable in the browser window
            // If the page has a fixed display header, it must be draggable below the header, you can set top: -targetRect.top + uiData.y + height of the header.
            bounds: {
                left: -targetRect.left + uiData.x,
                right: clientWidth - 300,
                top: -targetRect.top + uiData.y,
                bottom: clientHeight - (targetRect.bottom - uiData.y),
            },
        });
    };

    onClickShow = () => {
        this.setState({
            cardShow: true,
        })
    }

    onClickClose = () => {
        this.setState({
            cardShow: false,
            bounds: { left: 0, top: 0, bottom: 0, right: 0 },
        })
    }

    render() {
        const {disabled, bounds, cardShow} = this.state;
        return (
            <div style={{width: '100%'}}>
                <Draggable
                    disabled={disabled}
                    bounds={bounds}
                    onStart={(event, uiData) => this.onStart(event, uiData)}
                >
                    <div ref={this.draggleRef}>
                        {cardShow &&
                        <Card
                            title={
                                <div
                                    style={{
                                        width: '100%',
                                        cursor: 'move',
                                    }}
                                    onMouseOver={() => {
                                        this.setState({
                                            disabled: false,
                                        });
                                    }}
                                    onMouseOut={() => {
                                        this.setState({
                                            disabled: true,
                                        });
                                    }}
                                    onFocus={() => {}}
                                    onBlur={() => {}}
                                >
                                    {'Title'}
                                </div>
                            }
                            extra={
                                <span onClick={() => this.onClickClose()}>
                                    <Icon type={'close'} style={{fontSize:'16px'}}/>
                                </span>
                            }
                            style={{ width: 300, position: 'fixed', zIndex: 999 }}>
                            <p>Conetent</p>
                        </Card>}
                    </div>
                </Draggable>
                <span >{'Help'}</span><Icon onClick={() => this.onClickShow()} type="question-circle" />
            </div>
        );
    }

}