How do I make a component that resembles an open desktop application - html

Question

I'm trying create a portfolio web page where you can open up modals that resemble windows xp desktop apps. So the outer div has a background image of the outside boundary/border with the close button etc and the inside is another div which is my resume which should be scrollable but stay fixed inside the outer div.
Here's my code so far:
import React, { Component } from 'react';
import Draggable from 'react-draggable';
import './modal.css'
import res from '/Users/anthonychoi98/Documents/GitHub/portfolio/src/images/resumetemp.jpg';
class Modal extends Component {
displayInfo () {
switch(this.props.modalInfo) {
case 'Modal A':
return <div className="modal-info">This is Modal A</div>
case 'Modal B':
return(
<div className="resume-container">
<div className="modal-resume" style={{backgroundImage: `url('${res}')`}}>
</div>
</div>
);
default:
return null
}
}
closeModal = (e) => {
e.stopPropagation()
this.props.closeModal()
}
render(){
const divStyle = {
display: this.props.displayModal ? 'block' : 'none'
};
return (
<>
<div>
<Draggable
axis="both"
handle=".modal"
defaultPosition={{x: 0, y: 0}}
position={null}
grid={[25, 25]}
scale={1}
onStart={this.handleStart}
onDrag={this.handleDrag}
onStop={this.handleStop}>
<div
className="modal"
style={divStyle}>
<div className="modal-content"
onClick={ e => e.stopPropagation() }>
<span
className="close"
onClick={ this.closeModal }>x
</span>
<div class="modal-flex">
{this.displayInfo()}
</div>
</div>
</div>
</Draggable>
</div>
</>
);
}
}
export default Modal;
and heres the css:
/* MODAL */
/* Background effect. It covers the entire site */
.modal {
z-index: 1; /* Overlay effect: positioned over other containers */
width: 55%; /* Full width */
height: 90%; /* Full height */
top: 0;
left: 0;
overflow: hidden; /* Enable scroll if needed -> use auto */
}
/* Modal content */
.modal-content {
overflow-y: auto;
overflow-x: hidden;
background-color: white;
width: 100%; /* Width in proportion to its parent container*/
max-width: 640px; /* Max width where it stops expanding */
height: 100%; /* Height in proportion to its parent container */
margin: auto; /* Auto margin according to the element width */
padding: 10px;
/* border: 1px solid black; */
z-index: 1;
position: fixed;
border-radius:10px;
background-size: cover;
background-image: url('https://www.zwodnik.com/media/images/adobe-reader_windows.png')
}
/* Close button */
.close {
color: black;
float: right; /* Positioned to the right of the parent container whichever size it is */
float: top;
font-size: 30px !important;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
div.modal-flex {
/* overflow: auto; */
background-size: contain;
background-color: white;
width: 100%; /* Width in proportion to its parent container*/
height: 100%; /* Height in proportion to its parent container */
margin-top: 20px!important;
margin: auto;
border: 1px solid black;
z-index: 1;
overflow: contain;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: center;
align-items: flex-start;
}
div.resume-container{
overflow: auto;
position: absolute;
}
div.modal-resume{
/* background-size: contain; */
margin-bottom:45px;
position: relative;
min-width: 100%;
min-height: 100%;
padding-bottom: 50px;
order: 0;
/* flex: 1 1 auto; */
align-self: stretch;
background-repeat: no-repeat;
/* background-image: url('/Users/anthonychoi98/Documents/GitHub/portfolio/src/images/resumetemp.jpg'); */
}
span.close{
padding-right:20px;
padding-bottom:35px;
margin-top:-8px;
}
Is there a better way to make this? I know it will probably look wrong on different sized screens or if the page is minimized/maximized. I could just photoshop the resume into the background but i would not be able to scroll