Add popup class
This commit is contained in:
parent
daaa9a62f4
commit
f86b9ee220
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