I'm currently working on implementing a modal window in React, but I've encountered an issue where setting position: fixed results in the modal window's position being relative to the page rather than the browser window. For privacy reasons, I've added black boxes over certain areas in the screenshot below.
https://i.sstatic.net/FZp2p.png
Below is the code for this page, which includes the modal window component placed at the top.
import React, { useState } from 'react';
import Head from 'next/head';
import utilStyles from '../styles/util.module.css';
import styles from '../styles/education.module.css';
import courseData from '../public/courses.json' assert {type: 'json'};
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCalendar } from '@fortawesome/free-regular-svg-icons';
import { faXmark } from '@fortawesome/free-solid-svg-icons';
// Modal Component
function Modal({ isShow, handleClick, longDescription, children }) {
return (isShow ?
<div className="modal-outer" onClick={handleClick}>
<div className="modal-inner">
{children}
<button className="exit"><FontAwesomeIcon className="exit-icon" icon={faXmark}/></button>
<p className="course-description-long">{longDescription}</p>
</div>
</div>
: "");
}
// Course Content Component
function CourseContent({ courseName, shortDescription }) {
return (
<>
<h3 className="course-name">{courseName}</h3>
<p className="course-description-short">{shortDescription}</p>
</>
)
}
// Course Card Component
function CourseCard({ courseName, shortDescription, longDescription}){
const [isShow, setIsShow] = useState(false);
function handleClick () {
setIsShow(!isShow);
}
return (
<>
<li key={courseName} className="course-card" onClick={handleClick}>
<CourseContent courseName={courseName} shortDescription={shortDescription}/>
</li>
<Modal isShow={isShow}
longDescription="this is the long description"
handleClick={handleClick}>
<CourseContent courseName={courseName} shortDescription={shortDescription}/>
</Modal>
</>
)
}
// Degree Information Component
function DegreeInfo(props) {
const { universityName, degreeType, degreeName, startYear, endYear, courses } = props;
return (
<li>
<p>{universityName}</p>
<p>{degreeType}. {degreeName}</p>
<div className="date-container">
<FontAwesomeIcon icon={faCalendar}/>
<time dateTime={`${startYear}/${endYear}`}>{startYear}–{endYear}</time>
</div>
<ul className="course-cards-list">
{courses.map(course =>
<CourseCard key={course.courseName} courseName={course.courseName} shortDescription={course.shortDescription} />
)}
</ul>
</li>
)
}
export default function EducationPage() {
const yearDecoder = {1: "First-year", 2: "Second-year", 3: "Third-year"};
return (
<>
<Head>
<title>Education | Alé Pouroullis</title>
</Head>
<div className={`${utilStyles.container} ${utilStyles['float-in']}`}>
<h1>Education</h1>
<section className="university">
<h2>Tertiary</h2>
<ul className={`${styles['main-list']}`}>
{courseData.degrees.map(degree => {
const courses = degree.courses;
courses.sort(sortByYear);
return (<DegreeInfo key={degree.name} universityName={degree.universityName}
degreeType={degree.type} degreeName={degree.degreeName}
startYear={degree.startYear} endYear={degree.endYear}
courses={courses}/>)
})}
</ul>
</section>
<section className="courses">
<h2>Courses</h2>
<ul className="main-list">
<li className="main-list-item">
<span className="main-list-text">Mathematics for Machine Learning Specialization</span>
<ul className="sub-list">
<li className="sub-list-item"><span className="sub-list-text">Linear Algebra</span></li>
<li className="sub-list-item"><span className="sub-list-text">Multivariable Calculus</span></li>
</ul>
</li>
</ul>
</section>
</div>
</>
);
}
// Sorting Function for Courses
function sortByYear(a, b) {
if (a.year < b.year) {
return -1;
} else if (a.year > b.year) {
return 1;
} else {
return 0;
}
}
Here is the CSS styling used for the modal window:
.modal-outer {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
display: flex;
justify-content: center;
align-items: center;
}
As a beginner in React, I appreciate any advice or assistance with this issue. Thank you!