Commit 437809f

committed

added overlay component

1 parent 2fed359 commit 437809fCopy full SHA for 437809f

File tree

+54

-1

lines changed

+54

-1

lines changed

Lines changed: 2 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,8 @@`
`16`	`16`	`- [API Integration Edit Component](react-js/api/ApiEdit.js)`
`17`	`17`	`- [API Integration Delete Component](react-js/api/ApiTodo.js)`
`18`	`18`	`- [Basic API Integration with Fetch and Axios](react-js/fetch-axios.js)`
`19`		`-- [Create Custom Modal ](react-js/modal/Modal.js)`
	`19`	`+- [Custom Modal ](react-js/modal/Modal.js)`
	`20`	`+- [Custom Backgroud Overlay ](react-js/overlay/Overlay.js)`
`20`	`21`	`- [Manual Delay](react-js/delay.js)`
`21`	`22`	`- [React Web Camera Streaming](react-js/webcam.js)`
`22`	`23`	`- [Exportable Date Time](react-js/dateTime.js)`

Lines changed: 17 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,17 @@`
	`1`	`+import React from 'react';`
	`2`	`+import styles from "./Overlay.module.css";`
	`3`	`+`
	`4`	`+const Overlay = ({children, className, show, close}) => (`
	`5`	`+ <div className={styles.overlay + " " + className} style={{display: show ? 'block' : 'none'}}>`
	`6`	`+ <div className={styles.overlay} onClick={close}/>`
	`7`	`+ <div className={styles.content}>`
	`8`	`+ <span className={styles.closeButton} onClick={close}>`
	`9`	`+ ×`
	`10`	`+ </span>`
	`11`	`+`
	`12`	`+ {children}`
	`13`	`+ </div>`
	`14`	`+`
	`15`	`+ </div>`
	`16`	`+);`
	`17`	`+export default Overlay;`

Lines changed: 35 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,35 @@`
	`1`	`+.overlay {`
	`2`	`+ position: fixed;`
	`3`	`+ display: none;`
	`4`	`+ width: 100%;`
	`5`	`+ height: 100%;`
	`6`	`+ top: 0;`
	`7`	`+ left: 0;`
	`8`	`+ right: 0;`
	`9`	`+ bottom: 0;`
	`10`	`+ background-color: rgba(0, 0, 0, 0.5);`
	`11`	`+ z-index: 2;`
	`12`	`+ cursor: pointer;`
	`13`	`+}`
	`14`	`+.content{`
	`15`	`+ margin-top: 100px;`
	`16`	`+}`
	`17`	`+`
	`18`	`+.closeButton {`
	`19`	`+ position: fixed;`
	`20`	`+ height: 70px;`
	`21`	`+ width: 70px;`
	`22`	`+ right: 35px;`
	`23`	`+ top: 25px;`
	`24`	`+ background-color: #fff;`
	`25`	`+ border-radius: 100px;`
	`26`	`+ transition: opacity .7s ease-out;`
	`27`	`+ -moz-transition: opacity .7s ease-out;`
	`28`	`+ -webkit-transition: opacity .7s ease-out;`
	`29`	`+ -o-transition: opacity .7s ease-out;`
	`30`	`+ opacity: 1;`
	`31`	`+}`
	`32`	`+`
	`33`	`+.closeButton:hover {`
	`34`	`+ opacity: 0.4;`
	`35`	`+}`

Comments

(0)