diff --git a/src/components/UI/Backdrop/Backdrop.css b/src/components/UI/Backdrop/Backdrop.css
new file mode 100644
index 0000000..d09bc2d
--- /dev/null
+++ b/src/components/UI/Backdrop/Backdrop.css
@@ -0,0 +1,9 @@
+.Backdrop {
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ z-index: 100;
+ left: 0;
+ top: 0;
+ background-color: rgba(0, 0, 0, 0.5);
+}
\ No newline at end of file
diff --git a/src/components/UI/Backdrop/Backdrop.js b/src/components/UI/Backdrop/Backdrop.js
new file mode 100644
index 0000000..6740640
--- /dev/null
+++ b/src/components/UI/Backdrop/Backdrop.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import classes from './Backdrop.css';
+const backdrop = (props) => {
+ return (
+ props.show ?
+
+
: null
+ )
+}
+
+export default backdrop;
\ No newline at end of file
diff --git a/src/components/UI/Modal/Modal.js b/src/components/UI/Modal/Modal.js
index 7bb3855..4a3e780 100644
--- a/src/components/UI/Modal/Modal.js
+++ b/src/components/UI/Modal/Modal.js
@@ -1,16 +1,25 @@
import React from 'react';
+import Aux from '../../../hoc/Auxiliary';
+import Backdrop from '../Backdrop/Backdrop';
import classes from './Modal.css';
const modal = (props) => {
return (
-
- {props.children}
-
+
+
+
+ {props.children}
+
+
+
);
};
diff --git a/src/containers/BurgerBuilder/BurgerBuilder.js b/src/containers/BurgerBuilder/BurgerBuilder.js
index 313290c..3bc04dc 100644
--- a/src/containers/BurgerBuilder/BurgerBuilder.js
+++ b/src/containers/BurgerBuilder/BurgerBuilder.js
@@ -82,6 +82,10 @@ class BurgerBuilder extends Component {
this.setState({ purchasing: true });
}
+ purchaseCancelHandler = () => {
+ this.setState({ purchasing: false });
+ }
+
render() {
const disabledInfo = {
...this.state.ingredients
@@ -93,7 +97,9 @@ class BurgerBuilder extends Component {
return (
-
+