React Popup 是一个弹窗组件的库。
yarn add reactjs-popup
npm install reactjs-popup
- contentStyle:设置内容区的样式
- overlayStyle:设置遮罩的样式
1
2
3
4
5
6
7
8
|
import React from "react";
import Popup from "reactjs-popup";
const PopupExample = () => (
<Popup trigger={<button> Trigger</button>} position="right center">
<div>Popup content here !!</div>
</Popup>
);
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const PopupExample = () => (
<Popup trigger={<button>Trigger</button>} position="top left">
{close => (
<div>
Content here
<a className="close" onClick={close}>
×
</a>
</div>
)}
</Popup>
);
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
const Modal = () => (
<div>
<button className="button" onClick={this.openModal}>
Controlled Popup
</button>
<Popup
open={this.state.open}
closeOnDocumentClick
onClose={this.closeModal}
>
<div className="modal">
<a className="close" onClick={this.closeModal}>×</a>
<span>666</span>
</div>
</Popup>
</div>
);
|