What is the best way to navigate my Page while my Dialog Component is displayed?

Is there a way to enable scrolling on the background when a dialog component opens up? By default, scrolling is disabled when the dialog appears. How can we allow scrolling in the background?

Here is the code snippet:

import React, { useState } from 'react';
import {
    makeStyles,
    Grid,
    Button,
    Dialog,
    DialogActions,
    DialogTitle,
} from '@material-ui/core';
import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
import CloseIcon from '@material-ui/icons/Close';

const styles = makeStyles((theme) => ({
    root: {
        position: 'fixed',
        bottom: '0 ',
        left: '0',
        right: '0',
        boxShadow: '0 0 6px rgb(0 0 0 / 70%)',
        backgroundColor: 'white',
        height: '63px',
    },
    textStyle: {
        fontFamily: 'Comfortaa',
    },
    icon: {
        color: theme.palette.primary.dark,
    },

    btn: {
        backgroundColor: theme.palette.primary.dark,
        color: 'white',
        fontFamily: 'Comfortaa',
        '&:hover': {
            backgroundColor: theme.palette.primary.dark,
        },
    },

    title: {
        display: 'flex',
        justifyContent: 'flex-end',
        borderBottom: '1px solid #e5e5e5',
    },
    closeIcon: {
        color: theme.palette.primary.light,
        '&:hover': {
            color: 'black',
        },
    },

    dialogStyle: {
        backgroundColor: 'white',
        position: 'absolute',
        top: 0,
    },

    dialogContainer: {
        opacity: 0,
    },
    dialogTitle: {
        display: 'flex',
        justifyContent: 'flex-end',
        borderBottom: '1px solid #e5e5e5',
    },
}));

const CartAppBar: React.FC = () => {
    const classes = styles();
    const [open, setOpen] = useState(false);

    const handleClickOpen = () => {
        setOpen(true);
    };
    const handleClose = () => {
        setOpen(false);
    };
    return (
        <>
            <Grid
                item
                container
                direction='row'
                justify='space-around'
                alignItems='center'
                className={classes.root}
                xs={12}
            >
                <div>
                    <ShoppingCartIcon
                        fontSize='large'
                        classes={{ root: classes.icon }}
                        onClick={handleClickOpen}
                    />
                </div>
                <div>
                    <Button
                        className={classes.btn}
                        type='submit'
                        onClick={() => {
                            return (window.location.href = '/checkout');
                        }}
                    >
                        Checkout
                    </Button>
                </div>
            </Grid>

            <Dialog
                open={open}
                onClose={handleClose}
                aria-labelledby='alert-dialog-title'
                aria-describedby='alert-dialog-description'
                maxWidth='md'
                fullWidth
                classes={{
                    paper: classes.dialogStyle,
                    container: classes.dialogContainer,
                }}
                scroll='paper'
            >
                <DialogTitle className={classes.dialogTitle}>
                    <CloseIcon
                        onClick={handleClose}
                        classes={{ root: classes.closeIcon }}
                    />
                </DialogTitle>
                {/* Footer */}
                {/* <DialogActions className={classes.footer}>
                    <Button classes={{ root: classes.btn }}>Add To Cart</Button>
                </DialogActions> */}
            </Dialog>
        </>
    );
};

export default CartAppBar;

https://i.sstatic.net/e0c66.png

In the image provided, the background has opacity and cannot be scrolled. How can this be overridden to allow scrolling in the background?

Answer №1

By utilizing the disableScrollLock attribute as a prop, you can prevent the scrolling lock behavior.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trigger JQuery function post CSS styling completion

Upon using $(document).ready(function() {...}, it seems that the function is invoked after the DOM has loaded, but potentially before CSS styles have been completely applied. My goal is to obtain the width of a particular element. Strangely, when attempti ...

Tips for integrating Redux toolkit with the latest version of Next.js

It seems that in order to incorporate redux into my app, I must enclose the majority of it within a redux provider, which should be a client component. As a result, almost every part of my app becomes a child of this client component. Does this imply tha ...

Utilizing React's useContext hook in conjunction with NextJS's static page generation for efficient rendering

Utilizing React useContext to eliminate prop-drilling, and constructing static pages in NextJS, according to the details presented in this informative Technouz post (NB: this is not related to the NextJS getStaticProps context parameter). The core functio ...

Crafting a robust and secure password using Yup and Formik while receiving personalized error notifications

My Password Validation Dilemma I'm in the process of developing a password field that can assess the strength of the input provided. In a different response, I came across a regex that I could utilize to validate whether the input meets specific crit ...

Is it possible to use jQuery to apply CSS styling to a div that is dynamically called by Javascript

I currently have the following HTML code: <div> <script type="text/javascript" src="someUrl"></script> </div> Once this script runs, it generates a nested div with links inside like this: <div> <div> <a hre ...

What is the best way to eliminate a duplicate item from the shopping cart without actually deleting it?

I developed an e-commerce platform with a cart feature using the context API. However, I encountered an issue where removing one item from the cart also deletes another item if there are two of the same items in the cart. How can this be prevented? Below ...

Expansive Offspring Division stretching to the Entire Vertical Length of its Guardian Division

I'm attempting to achieve full coverage of the parent div section by my child div section. Take a look at the Example URL (specifically where the Canadian Flag Stand Up Paddle Boarders are located) towards the bottom: Essentially, when I set the widt ...

Updating the hyperlink of an html element using css

I am looking to update this A tag <a href="contact.html" >Contact</a> to <a href="tel:+13174562564" >Contact</a> using only CSS, if possible. Alternatively, like this <a href="tel:+13174562564" >+13174562564</a> ...

Positioning an image on the left side of a div within a flex container using

Here is the code I have: .usp-bar { display: flex; flex-wrap: wrap; background-color: #005932; color: #fff; font-weight: 700; padding: 10px 0; margin-top: 0; ju ...

Revamping the Jquery Waypoint

Greetings, I am currently delving into the world of Jquery waypoints and facing a bit of challenge getting it to work. My goal is to have an "alert" pop up once an element becomes visible on the screen, but for some reason, the alert doesn't show up w ...

Change the background color of a MUI ToggleButton based on a dynamic selection

const StyledToggleButton = styled(MuiToggleButton)(({ selectedColor }) => ({ "&.Mui-selected, &.Mui-selected:hover": { backgroundColor: selectedColor, } })); const FilterTeam = (props) => { const [view, setView] = ...

Tips for changing between two texts within a button when clicked

Seeking a solution for toggling between two different texts inside a button when making an ajax call, with only one text displayed at a time. I'm facing difficulty in targeting the spans within the button specifically. Using 'this' as conte ...

React Native Component failing to re-render even though render function is executed

I'm a bit puzzled right now... Here's the code snippet that's causing me some confusion: renderTopic(topic){ if(topic.isMine){console.log('work?')} return ( <View key={topic.id.toString()} > ...

Why does the message in the socketio backend only return messages from other users?

I've encountered an issue while using socket.io for constructing a chat room. When inputting a message, the writer is unable to see it; only other users can view the message, as shown in the image above. Here's my code: const express = require("e ...

Guide to disabling file system routing for a particular page in Next.js

I'm trying to figure out how to block file system routing for only one specific page in nextjs. Despite attempting to use a Custom Server, the useFileSystemPublicRoutes : false option doesn't seem to work as some pages are still accessed through ...

Chrome on IOS: Experiencing screen freezing while scrolling

1) I'm working with Material UI in React JS. I have added a simple scrollable code, but when I reach the bottom of the screen/scroll, it freezes. 2) I also tried it with a simple HTML page and it worked correctly. <div style={{ ...

Display a single div and conceal the rest upon clicking a link

Trying to find a way to hide all other divs when clicking on a navbar link to toggle them. Currently, the divs stay active when a new link is clicked. The goal is for them to slide up and the clicked one to slide down. <script type="text/javascript> ...

Using Material UI v1 to customize the widths of table columns

I am looking to configure column widths on a Material UI table using CSS, rather than within React with "classes." However, I am struggling to understand how the column widths are actually controlled. Despite trying to set widths on the TH columns, it does ...

``There seems to be an issue with the alignment of items in the

I am fairly new to using css and bootstrap and I am currently working on integrating a carousel into my angular web app. I copied the code from the bootstrap site but I am facing challenges in aligning everything properly. Additionally, the image slides do ...

React failing to acknowledge messages from socket.io server

Currently, I am diving into the world of WebSockets and Socket.io. To assist with my learning process, I have created a basic text field along with a button on my frontend code: import React, { Component } from 'react' import './App.css&apos ...