Add popup class
This commit is contained in:
parent
6eaa79493e
commit
7e841cfaeb
32
src/components/Popup.js
Normal file
32
src/components/Popup.js
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import React, { Component } from 'react';
|
||||||
|
|
||||||
|
import './css/Popup.css';
|
||||||
|
|
||||||
|
|
||||||
|
class Popup extends Component {
|
||||||
|
state = {
|
||||||
|
visible: false
|
||||||
|
};
|
||||||
|
|
||||||
|
show = () => {
|
||||||
|
this.setState({
|
||||||
|
visible: true
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
hide = () => {
|
||||||
|
this.setState({
|
||||||
|
visible: false
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className={`${this.state.visible ? "visible" : ""}` + " popup"}>
|
||||||
|
{this.props.children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Popup;
|
19
src/components/css/Popup.css
Normal file
19
src/components/css/Popup.css
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
.popup {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%) scale(0);
|
||||||
|
transform-origin: center;
|
||||||
|
background: white;
|
||||||
|
width: 65vw;
|
||||||
|
height: 45vh;
|
||||||
|
box-shadow: var(--boxShadow);
|
||||||
|
border-radius: var(--borderRadius);
|
||||||
|
transition: .35s;
|
||||||
|
z-index: 11;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visible {
|
||||||
|
pointer-events: all;
|
||||||
|
transform: translate(-50%, -50%) scale(1);
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user