React简单遮罩层

CSS代码

.mask{ background: rgba(0,0,0,0.4) !important; z-index: 10; height: 100vh; position: fixed; width: 100vw; } .selectMask_box{ background: rgba(0,0,0,0); transition: all .2s linear }

.absolute{
  position: relative;
  background-color: transparent;
  z-index: 999;
  width: 100%;
  height: 55px;
}

JS代码

handleMask=()=>{ this.setState({ dateSelected: !this.state.dateSelected }) } <div onClick={this.handleMask} className={`selectMask_box ${this.state.dateSelected ? "mask" : ""} `} >

  //这里是待展示的内容，<div>...</div> //你可以自己设置dataSelected的初始值，同时请注意注意三元运算的顺序。
</div>

把 div放到页面最上方，给需要的菜单栏加相对定位，z-index即可 

import React, {Component} from 'react'
import './Header.scss'
import DropdownButton from "react-bootstrap/DropdownButton";
import BootDropdown from "react-bootstrap/Dropdown";
class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dateSelected:false
        }
    }

    handleMask = () => {
        this.setState({
            dateSelected: !this.state.dateSelected
        })
    }


    render() {
        return (
            <div >
                <div className={`selectMask_box ${this.state.dateSelected ? "mask" : ""} `} />
                {
                    window.innerWidth > 800 ? <div style={{
                        display: 'flex',
                        flexDirection: 'row',
                        justifyContent: 'space-between',
                        maxWidth: 1240,
                        padding: '0 20px',
                        height: window.innerWidth > 800 ? 100 : 50,
                        alignItems: 'center',
                        margin: '0 auto'
                    }}>
                        <div>
                            <a href="https://www.fowin.io"><img style={{height: window.innerWidth > 800 ? 28 : 16}}
                                                                src={require('../../assets/image/[e-mail]')} alt=""/></a>

                        </div>
                        <div>
                            <ul style={{display:"flex",justifyContent:"space-between",width:300}} className={'nav_pc'}>
                                <li><a style={{color:'#19448E',fontSize:14}} href={'#'}>关于我们</a></li>
                                <li><a style={{color:'#19448E',fontSize:14}} href="https://www.fowin.io/download">App下载</a></li>
                                <li><a style={{color:'#19448E',fontSize:14}} href={'/help'}>帮助中心</a></li>
                            </ul>
                        </div>
                    </div> : <div className={'absolute'}>
                        <div style={{
                            display: 'flex',
                            flexDirection: 'row',
                            justifyContent: 'space-between',
                            maxWidth: 1240,
                            padding: '0 20px',
                            height: window.innerWidth > 800 ? 100 : 50,
                            alignItems: 'center',
                            margin: '0 auto',
                            backgroundColor:'#fff'

                        }}>
                            <div className={'mobiel_btn'}>
                                <div>
                                    <a href="https://www.fowin.io"><img style={{height: window.innerWidth > 800 ? 28 : 16}}
                                                                        src={require('../../assets/image/[e-mail]')} alt=""/></a>

                                </div>
                                <div>
                                    <DropdownButton
                                        onClick={this.handleMask}
                                        alignRight
                                        title={<img src={require('../../assets/image/[e-mail]')} alt=""/>}
                                        id="dropdown-menu-align-right"
                                    >
                                        <BootDropdown.Item href={'#'} eventKey="1">关于我们</BootDropdown.Item>
                                        <BootDropdown.Item href={'https://www.fowin.io/download'} eventKey="2">App下载</BootDropdown.Item>
                                        <BootDropdown.Item href={'/help'} eventKey="3">帮助中心</BootDropdown.Item>
                                    </DropdownButton>
                                </div>
                                <div><span style={{color: '#00233D', fontSize: window.innerWidth > 800 ? 16 : 14,}}
                                           onClick={() => {
                                               this.props.history.push('/help');
                                           }}>
                    {/*<img style={{height: window.innerWidth > 800 ? 28 : 16}}*/}
                                    {/*     src={require('../../assets/image/[e-mail]')} alt=""/>*/}
                </span></div>
                            </div>
                        </div>
                    </div>
                }
            </div>
        )
    }
}

export default Header;