Next.js Discord

Discord Forum

Need help making modal rest above the entire layout

Answered
Dtugaming7 posted this in #help-forum
Open in Discord
Dtugaming7OP
The modal that I have currently is only resting above all the elements in the children and not the layout. How can I make this rest above the entire layout and children. I currently don't have the modal body just the shaded background that will appear.

the attached text file contains code for the element holding the modal.

Modal code:
'use client';

import React from 'react';
import styles from '@/styles/componentstyles/main/students/studentmodals/ViewStudentModal.module.css';

const ViewStudentModal = () => {


    return (
      <div className={styles.screenContainer}>

      </div>
    );
}

export default ViewStudentModal;

Css:
.screenContainer {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;

    opacity: 50%;

    background-color: #535353;
}
Answered by Oriental
I second react portals. This way you don't have to worry about funky stacking contexts that might be occuring in some deeply nested html. https://react.dev/reference/react-dom/createPortal#rendering-a-modal-dialog-with-a-portal
View full answer

7 Replies

Spectacled bear
Can you share the code for layout?
Dtugaming7OP
import React, {ReactNode} from 'react';
import Navbar from '@/components/main/layout/Navbar'
import '@/styles/globals/global2.css';
import "@/styles/globals/fonts.css"
import styles from '@/styles/MainLayout.module.css'
import Head from "next/head";

export default function MainDashboardLayout({ children }: { children: ReactNode }) {

    let title:string = "Dashboard";

    return (
        <html className={styles.html}>
            <Head>
                <title>Dashboard</title>
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            </Head>
            <body className={styles.layoutBody}>
                <div className={styles.navbar}><Navbar /></div>

                <div className={styles.childrenContainer}>
                    <main className={styles.children}>{children}</main>
                </div>
            </body>
        </html>
    );
};
would you also like the css for layout?
LuisLl
Quick fix might be to set a high z-index in your modal. But this won’t work if your CSS is preventing this from happening by setting stacking contexts, which seems not to be working in your case.

Another way to fix this might be using React Portals, this way you can force your Dialog to render inside the document.body instead of the actual place in the React Tree. In fact, React Portal is what's behind components like Dialog, Sheet, etc. from Shadcn, or rather, radix-ui components.
Oriental
I second react portals. This way you don't have to worry about funky stacking contexts that might be occuring in some deeply nested html. https://react.dev/reference/react-dom/createPortal#rendering-a-modal-dialog-with-a-portal
Answer
Dtugaming7OP
Thank you all for the portal solution worked great.
Crimson-collared Grosbeak
Awesome.