Bootstrap模態行為在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/