Reactのブートストラップモーダル様の動作

Question

イメージを処理しているので、オブジェクトをクリックするとポップアップボックスが表示されます。これは私のコードです。

<a href="#" onClick={this.handleClick} data-id={image.id}> 

これは私のhandleClickメソッドです。

handleClick(event) { 
     event.preventDefault(); 
     let mediaId = event.currentTarget.attributes['data-id'].value; 
     this.setState({overlay: <Overlay mediaId={mediaId}/>}); 
     } 

これは、私は、上からページにモーダルブートストラップ のようなものをスライドするには、このポップアップをしたい、関連するCSS

.overlay { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    height: 300px; 
    width: 500px; 
    background-image: linear-gradient(to top right, #7282fb, #755bf9, #7934f7); 
    box-shadow: 10px 10px 20px gray; 

} 

です。

また、ボックスの外側をクリックすると、このオーバーレイを表示します。

どうすれば実現できますか？おかげさまで

Answer 1

希望の動作をアーカイブするためにライブラリを使用する必要があるようです。 Reactにはいくつかありますが、 "modal"、 "overlay"キーワードで見つけることができます。多くの選択肢が存在します。 https://github.com/fckt/react-layer-stackを見てください（別の方法もご確認くださいhttps://github.com/fckt/react-layer-stack#alternatives）。あなたのケースを完璧に解決します。デモとサンプル - https://fckt.github.io/react-layer-stack/