React-遮罩层

效果图

JS

import React, { useState, Fragment } from 'react';
import styles from './style.less'
const data = [
    {
        name: '羽神',
        id: 1,
        src: 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=617a5596fd73380b818dc300'
    },
    {
        name: '少主',
        id: 2,
        src: 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=617a559d2ee1bd5a04779569'
    },
    {
        name: '大鼎',
        id: 3,
        src: 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=617a55a011001e6b8ea0cce3'
    },
    {
        name: '赵老威',
        id: 4,
        src: 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=617a55a422a0c62f56684521'
    },

]
const index = () =>
{
    const [isShow, setIsShow] = useState(false)
    const [assignImg, setAssignImg] = useState('')
    const bigImg = (data) =>
    {
        setAssignImg(data)
        setIsShow(true)
    }
    const BackPage = () =>
    {
        setIsShow(false)
    }
    return (
        <Fragment>
            <div className={styles.container}>
                {data.map((data, index) => (
                    <div className={styles.core} key={index}>
                        <img onClick={() => { bigImg(data.src) }} src={data.src} alt={data.name} />
                    </div>
                ))}
            </div >
            <div onClick={BackPage} style={isShow ? { display: '-webkit-box' } : { display: 'none' }} className={styles.imgViewDom}>
                <img src={assignImg} alt="" />
            </div>
        </Fragment>

    );
};
export default index

CSS

.container {
  display: flex;

  .core {
    margin: 20px;
    width: 200px;
    height: 200px;

    img {
      width: 100%;
    }
  }
}

.container img {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}

.imgViewDom {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 99999999;
  background: rgba(255, 255, 255, 0.8);
  overflow: auto;
  display: -webkit-box;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  display: -moz-box;
  -moz-box-align: center;
  -moz-box-pack: center;
  display: -o-box;
  -o-box-align: center;
  -o-box-pack: center;
  display: -ms-box;
  -ms-box-align: center;
  -ms-box-pack: center;
  display: box;
  box-align: center;
  box-pack: center;

  -webkit-transition: all 1.0s ease-in-out;
  -moz-transition: all 1.0s ease-in-out;
  -o-transition: all 1.0s ease-in-out;
  -ms-transition: all 1.0s ease-in-out;
  transition: all 1.0s ease-in-out;
  opacity: .8;

  &:hover {
    opacity: 1;
  }
}

.imgViewDom img {
  width: 450px;
  cursor: zoom-out;
  border-style: none;
  border: 0;
  outline: none;
}