camerin
/
portfolio
mirror of https://github.com/RaspberryProgramming/portfolio.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixed bug where modal may block content 

When modal is not shown, it was blocking some content
This commit is contained in:
Camerin Figueroa 2021-10-23 13:32:15 -04:00
parent 8701d73f9a
commit 2c153f5faf
2 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/css/Modal.css
View File

@ -12,8 +12,14 @@
align-items: center; align-items: center;
transition: opacity 300ms ease-out 50ms, width 300ms ease-out 50ms, background-color 80ms ease-out; transition: opacity 300ms ease-out 50ms, width 300ms ease-out 50ms, background-color 80ms ease-out;
} }
.modal.hide * {
visibility: hidden;
transition: visibility 300ms;
}
.modal.show { .modal.show {
display:flex;
width: 100%; width: 100%;
background-color: rgba(0,0,0,0.4); background-color: rgba(0,0,0,0.4);
opacity: 1; opacity: 1;
@ -21,10 +27,8 @@
} }
.modal .box { .modal .box {
border: 2px solid #544545;
border-radius: 10px; border-radius: 10px;
border-style: solid;
border-color: #544545;
border-width: 2px;
background-color: white; background-color: white;
padding: 25px; padding: 25px;
} }

2
src/components/subcomponents/Modal.js
View File

@ -22,7 +22,7 @@ const Modal = props => {
* once you're ready to display the modal. If it exists or is set to true it will display the modal. * once you're ready to display the modal. If it exists or is set to true it will display the modal.
*/ */
return ReactDOM.createPortal( return ReactDOM.createPortal(
<div onClick={props.onDismiss} className={`modal ${props.show?'show':''}`}> <div onClick={props.onDismiss} className={`modal ${props.show?'show':'hide'}`}>
<div onClick={(e) => e.stopPropagation()} className="box"> <div onClick={(e) => e.stopPropagation()} className="box">
<div className="title">{props.title}</div> <div className="title">{props.title}</div>