这个问题让你有必要深刻的看看tabindex="-1"的原理。

由于这个问题实在不好描述，那就直接上图。

问题如下

解决后

那我是怎么解决的呢？先来看看下面的使用代码。

测试代码

你可以在github上看到：

主要代码

import React, { Component } from 'react'import Lightbox from 'react-image-lightbox'import 'react-image-lightbox/style.css' // This only needs to be imported once in your appconst images = [  '//placekitten.com/1500/500',  '//placekitten.com/4000/3000',  '//placekitten.com/800/1200',  '//placekitten.com/1500/1500']export default class LightboxExample extends Component {  constructor (props) {    super(props)    this.state = {      photoIndex: 0,      isOpen: false    }  }  render () {    const { photoIndex, isOpen } = this.state    return (      
    
        
     
        
     
        
     
       this.setState({ isOpen: true })}>          Open Lightbox        
     
        {isOpen && (          
     
       this.setState({ isOpen: false })}            onMovePrevRequest={() =>              this.setState({                photoIndex: (photoIndex + images.length - 1) % images.length              })            }            onMoveNextRequest={() =>              this.setState({                photoIndex: (photoIndex + 1) % images.length              })            }          />        )}      
     
    
    )  }}复制代码

解决这个问题

这个问题就是tabindex的坑，由于底部高度为1000px的div，会有滑动条，而且用了tabindex=-1，react-image-lightbox 也使用了tabindex=-1，于是当关闭lightBox以后，会把焦点移到底部的div，底部div被获得焦点，于是浏览器把它置顶了。

这个问题官方也有答案，但是我真的是找了一天啊！怪我。

官方解决

来看看这个问题的答案吧：

总结

使用reactModalProps={

欢迎访问我的Blog：