added overlay component

README.md

@@ -16,7 +16,8 @@
 - [API Integration Edit Component](react-js/api/ApiEdit.js)
 - [API Integration Delete Component](react-js/api/ApiTodo.js)
 - [Basic API Integration with Fetch and Axios](react-js/fetch-axios.js)
-- [Create Custom Modal ](react-js/modal/Modal.js)
+- [Custom Modal ](react-js/modal/Modal.js)
+- [Custom Backgroud Overlay ](react-js/overlay/Overlay.js)
 - [Manual Delay](react-js/delay.js) 
 - [React Web Camera Streaming](react-js/webcam.js) 
 - [Exportable Date Time](react-js/dateTime.js) 

react-js/overlay/Overlay.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import styles from "./Overlay.module.css";
+
+const Overlay = ({children, className, show, close}) => (
+    <div className={styles.overlay + " " + className} style={{display: show ? 'block' : 'none'}}>
+        <div className={styles.overlay} onClick={close}/>
+        <div className={styles.content}>
+        <span className={styles.closeButton} onClick={close}>
+        &times;
+              </span>
+
+        {children}
+        </div>
+
+    </div>
+);
+export default Overlay;

react-js/overlay/Overlay.module.css

@@ -0,0 +1,35 @@
+.overlay {
+    position: fixed;
+    display: none;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 2;
+    cursor: pointer;
+}
+.content{
+    margin-top: 100px;
+}
+
+.closeButton {
+    position: fixed;
+    height: 70px;
+    width: 70px;
+    right: 35px;
+    top: 25px;
+    background-color: #fff;
+    border-radius: 100px;
+    transition: opacity .7s ease-out;
+    -moz-transition: opacity .7s ease-out;
+    -webkit-transition: opacity .7s ease-out;
+    -o-transition: opacity .7s ease-out;
+    opacity: 1;
+}
+
+.closeButton:hover {
+    opacity: 0.4;
+}