Use material-ui's dialog component to add dialogs to your site for lightboxes, user notifications, or completely custom content.
You will find the styles for this component instyles/jss/nextjs-material-kit-pro/modalStyle.js.
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Slide from "@material-ui/core/Slide";
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent";
import DialogActions from "@material-ui/core/DialogActions";
// @material-ui/icons
import Close from "@material-ui/icons/Close";
// core components
import Button from "components/CustomButtons/Button.js";
import style from "styles/jss/nextjs-material-kit-pro/modalStyle.js";
const Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="down" ref={ref} {...props} />;
});
const useStyles = makeStyles(style);
export default function ExampleLiveDemo() {
const [liveDemo, setLiveDemo] = React.useState(false);
const classes = useStyles();
return (
<div>
<Button color="primary" onClick={() => setLiveDemo(true)}>
Launch Demo Modal
</Button>
<Dialog
classes={{
root: classes.modalRoot,
paper: classes.modal
}}
open={liveDemo}
TransitionComponent={Transition}
keepMounted
onClose={() => setLiveDemo(false)}
aria-labelledby="classic-modal-slide-title"
aria-describedby="classic-modal-slide-description"
>
<DialogTitle
id="classic-modal-slide-title"
disableTypography
className={classes.modalHeader}
>
<Button
simple
className={classes.modalCloseButton}
key="close"
aria-label="Close"
onClick={() => setLiveDemo(false)}
>
{" "}
<Close className={classes.modalClose} />
</Button>
<h4 className={classes.modalTitle}>Modal title</h4>
</DialogTitle>
<DialogContent
id="classic-modal-slide-description"
className={classes.modalBody}
>
<p>Woohoo, you're reading this text in a modal!</p>
</DialogContent>
<DialogActions className={classes.modalFooter}>
<Button onClick={() => setLiveDemo(false)} color="secondary">
Close
</Button>
<Button color="primary">Save changes</Button>
</DialogActions>
</Dialog>
</div>
);
}
When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Slide from "@material-ui/core/Slide";
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent";
import DialogActions from "@material-ui/core/DialogActions";
// @material-ui/icons
import Close from "@material-ui/icons/Close";
// core components
import Button from "components/CustomButtons/Button.js";
import modalStyle from "styles/jss/nextjs-material-kit-pro/modalStyle.js";
const style = theme => ({
...modalStyle(theme),
modalRootExample: {
"& > div:first-child": {
display: "none"
},
backgroundColor: "rgba(0, 0, 0, 0.5)"
}
});
const Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="down" ref={ref} {...props} />;
});
const useStyles = makeStyles(style);
export default function ExampleScrolling() {
const [scrollingModal, setScrollingModal] = React.useState(false);
const classes = useStyles();
return (
<div>
<Button color="primary" onClick={() => setScrollingModal(true)}>
Launch Demo Modal
</Button>
<Dialog
onClick={() => setScrollingModal(false)}
classes={{
root: `${classes.modalRoot} ${classes.modalRootExample}`,
paper: classes.modal
}}
open={scrollingModal}
TransitionComponent={Transition}
keepMounted
onClose={() => setScrollingModal(false)}
aria-labelledby="classic-modal-slide-title"
aria-describedby="classic-modal-slide-description"
>
<DialogTitle
id="classic-modal-slide-title"
disableTypography
className={classes.modalHeader}
>
<Button
simple
className={classes.modalCloseButton}
key="close"
aria-label="Close"
onClick={() => setScrollingModal(false)}
>
{" "}
<Close className={classes.modalClose} />
</Button>
<h4 className={classes.modalTitle}>Modal title</h4>
</DialogTitle>
<DialogContent
id="classic-modal-slide-description"
className={classes.modalBody}
>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
cursus magna, vel scelerisque nisl consectetur et. Donec sed odio
dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
cursus magna, vel scelerisque nisl consectetur et. Donec sed odio
dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
cursus magna, vel scelerisque nisl consectetur et. Donec sed odio
dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
cursus magna, vel scelerisque nisl consectetur et. Donec sed odio
dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
cursus magna, vel scelerisque nisl consectetur et. Donec sed odio
dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
cursus magna, vel scelerisque nisl consectetur et. Donec sed odio
dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
</DialogContent>
<DialogActions className={classes.modalFooter}>
<Button onClick={() => setScrollingModal(false)} color="secondary">
Close
</Button>
<Button color="primary">Save changes</Button>
</DialogActions>
</Dialog>
</div>
);
}
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Slide from "@material-ui/core/Slide";
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent";
import DialogActions from "@material-ui/core/DialogActions";
import InputAdornment from "@material-ui/core/InputAdornment";
import Icon from "@material-ui/core/Icon";
// @material-ui/icons
import Close from "@material-ui/icons/Close";
import Assignment from "@material-ui/icons/Assignment";
import Mail from "@material-ui/icons/Mail";
import Face from "@material-ui/icons/Face";
// core components
import Button from "components/CustomButtons/Button.js";
import Card from "components/Card/Card.js";
import CardHeader from "components/Card/CardHeader.js";
import CardBody from "components/Card/CardBody.js";
import CustomInput from "components/CustomInput/CustomInput.js";
import style from "styles/jss/nextjs-material-kit-pro/pages/componentsSections/javascriptStyles.js";
const Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="down" ref={ref} {...props} />;
});
const useStyles = makeStyles(style);
export default function ExampleLogin() {
const [loginModal, setLoginModal] = React.useState(false);
const classes = useStyles();
return (
<div>
<Button round onClick={() => setLoginModal(true)}>
Login <Assignment />
</Button>
<Dialog
classes={{
root: classes.modalRoot,
paper: classes.modal + " " + classes.modalLogin
}}
open={loginModal}
TransitionComponent={Transition}
keepMounted
onClose={() => setLoginModal(false)}
aria-labelledby="login-modal-slide-title"
aria-describedby="login-modal-slide-description"
>
<Card plain className={classes.modalLoginCard}>
<DialogTitle
id="login-modal-slide-title"
disableTypography
className={classes.modalHeader}
>
<CardHeader
plain
color="primary"
className={`${classes.textCenter} ${classes.cardLoginHeader}`}
>
<Button
simple
className={classes.modalCloseButton}
key="close"
aria-label="Close"
onClick={() => setLoginModal(false)}
>
{" "}
<Close className={classes.modalClose} />
</Button>
<h5 className={classes.cardTitleWhite}>Log in</h5>
<div className={classes.socialLine}>
<Button justIcon link className={classes.socialLineButton}>
<i className="fab fa-facebook-square" />
</Button>
<Button justIcon link className={classes.socialLineButton}>
<i className="fab fa-twitter" />
</Button>
<Button justIcon link className={classes.socialLineButton}>
<i className="fab fa-google-plus-g" />
</Button>
</div>
</CardHeader>
</DialogTitle>
<DialogContent
id="login-modal-slide-description"
className={classes.modalBody}
>
<form>
<p className={`${classes.description} ${classes.textCenter}`}>
Or Be Classical
</p>
<CardBody className={classes.cardLoginBody}>
<CustomInput
id="login-modal-first"
formControlProps={{
fullWidth: true
}}
inputProps={{
startAdornment: (
<InputAdornment position="start">
<Face className={classes.icon} />
</InputAdornment>
),
placeholder: "First Name..."
}}
/>
<CustomInput
id="login-modal-email"
formControlProps={{
fullWidth: true
}}
inputProps={{
startAdornment: (
<InputAdornment position="start">
<Mail className={classes.icon} />
</InputAdornment>
),
placeholder: "Email..."
}}
/>
<CustomInput
id="login-modal-pass"
formControlProps={{
fullWidth: true
}}
inputProps={{
startAdornment: (
<InputAdornment position="start">
<Icon className={classes.icon}>lock_outline</Icon>
</InputAdornment>
),
placeholder: "Password..."
}}
/>
</CardBody>
</form>
</DialogContent>
<DialogActions
className={`${classes.modalFooter} ${classes.justifyContentCenter}`}
>
<Button color="primary" simple size="lg">
Get started
</Button>
</DialogActions>
</Card>
</Dialog>
</div>
);
}
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Slide from "@material-ui/core/Slide";
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent";
import InputAdornment from "@material-ui/core/InputAdornment";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";
import Icon from "@material-ui/core/Icon";
// @material-ui/icons
import Close from "@material-ui/icons/Close";
import Assignment from "@material-ui/icons/Assignment";
import Face from "@material-ui/icons/Face";
import Timeline from "@material-ui/icons/Timeline";
import Code from "@material-ui/icons/Code";
import Group from "@material-ui/icons/Group";
import Email from "@material-ui/icons/Email";
import Check from "@material-ui/icons/Check";
// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Button from "components/CustomButtons/Button.js";
import Card from "components/Card/Card.js";
import CustomInput from "components/CustomInput/CustomInput.js";
import InfoArea from "components/InfoArea/InfoArea.js";
import style from "styles/jss/nextjs-material-kit-pro/pages/componentsSections/javascriptStyles.js";
const Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="down" ref={ref} {...props} />;
});
const useStyles = makeStyles(style);
export default function ExampleSingup() {
const [signupModal, setSignupModal] = React.useState(false);
const classes = useStyles();
return (
<div>
<Button round onClick={() => setSignupModal(true)}>
<Assignment /> Signup
</Button>
<Dialog
classes={{
root: classes.modalRoot,
paper: classes.modal + " " + classes.modalSignup
}}
open={signupModal}
TransitionComponent={Transition}
keepMounted
onClose={() => setSignupModal(false)}
aria-labelledby="signup-modal-slide-title"
aria-describedby="signup-modal-slide-description"
>
<Card plain className={classes.modalSignupCard}>
<DialogTitle
id="signup-modal-slide-title"
disableTypography
className={classes.modalHeader}
>
<Button
simple
className={classes.modalCloseButton}
key="close"
aria-label="Close"
onClick={() => setSignupModal(false)}
>
{" "}
<Close className={classes.modalClose} />
</Button>
<h5 className={classes.cardTitle + " " + classes.modalTitle}>
Register
</h5>
</DialogTitle>
<DialogContent
id="signup-modal-slide-description"
className={classes.modalBody}
>
<GridContainer>
<GridItem xs={12} sm={5} md={5} className={classes.mlAuto}>
<InfoArea
className={classes.infoArea}
title="Marketing"
description={
<p>
We've created the marketing campaign of the website. It
was a very interesting collaboration.
</p>
}
icon={Timeline}
iconColor="rose"
/>
<InfoArea
className={classes.infoArea}
title="Fully Coded in HTML5"
description={
<p>
We've developed the website with HTML5 and CSS3. The
client has access to the code using GitHub.
</p>
}
icon={Code}
iconColor="primary"
/>
<InfoArea
className={classes.infoArea}
title="Built Audience"
description={
<p>
There is also a Fully Customizable CMS Admin Dashboard for
this product.
</p>
}
icon={Group}
iconColor="info"
/>
</GridItem>
<GridItem xs={12} sm={5} md={5} className={classes.mrAuto}>
<div className={classes.textCenter}>
<Button justIcon round color="twitter">
<i className="fab fa-twitter" />
</Button>
{" "}
<Button justIcon round color="dribbble">
<i className="fab fa-dribbble" />
</Button>
{" "}
<Button justIcon round color="facebook">
<i className="fab fa-facebook-f" />
</Button>
{" "}
<h4 className={classes.socialTitle}>or be classical</h4>
</div>
<form className={classes.form}>
<CustomInput
formControlProps={{
fullWidth: true,
className: classes.customFormControlClasses
}}
inputProps={{
startAdornment: (
<InputAdornment
position="start"
className={classes.inputAdornment}
>
<Face className={classes.inputAdornmentIcon} />
</InputAdornment>
),
placeholder: "First Name..."
}}
/>
<CustomInput
formControlProps={{
fullWidth: true,
className: classes.customFormControlClasses
}}
inputProps={{
startAdornment: (
<InputAdornment
position="start"
className={classes.inputAdornment}
>
<Email className={classes.inputAdornmentIcon} />
</InputAdornment>
),
placeholder: "Email..."
}}
/>
<CustomInput
formControlProps={{
fullWidth: true,
className: classes.customFormControlClasses
}}
inputProps={{
startAdornment: (
<InputAdornment
position="start"
className={classes.inputAdornment}
>
<Icon className={classes.inputAdornmentIcon}>
lock_outline
</Icon>
</InputAdornment>
),
placeholder: "Password..."
}}
/>
<FormControlLabel
classes={{
label: classes.label
}}
control={
<Checkbox
tabIndex={-1}
onClick={() => this.handleToggle(1)}
checkedIcon={<Check className={classes.checkedIcon} />}
icon={<Check className={classes.uncheckedIcon} />}
classes={{
checked: classes.checked,
root: classes.checkRoot
}}
/>
}
label={
<span>
I agree to the <a href="#pablo">terms and conditions</a>
.
</span>
}
/>
<div className={classes.textCenter}>
<Button round color="primary">
Get started
</Button>
</div>
</form>
</GridItem>
</GridContainer>
</DialogContent>
</Card>
</Dialog>
</div>
);
}
Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Slide from "@material-ui/core/Slide";
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent";
import DialogActions from "@material-ui/core/DialogActions";
import Tooltip from "@material-ui/core/Tooltip";
import Popover from "@material-ui/core/Popover";
// @material-ui/icons
import Close from "@material-ui/icons/Close";
// core components
import Button from "components/CustomButtons/Button.js";
import modalStyle from "styles/jss/nextjs-material-kit-pro/modalStyle.js";
import popoverStyles from "styles/jss/nextjs-material-kit-pro/popoverStyles.js";
import tooltipsStyle from "styles/jss/nextjs-material-kit-pro/tooltipsStyle.js";
const style = theme => ({
...modalStyle(theme),
...popoverStyles,
...tooltipsStyle
});
const Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="down" ref={ref} {...props} />;
});
const useStyles = makeStyles(style);
export default function ExampleTooltipsPopovers() {
const [anchorElLeft, setAnchorElLeft] = React.useState(null);
const [liveDemo, setLiveDemo] = React.useState(false);
const classes = useStyles();
return (
<div>
<Button color="primary" onClick={() => setLiveDemo(true)}>
Launch Demo Modal
</Button>
<Dialog
classes={{
root: classes.modalRoot,
paper: classes.modal
}}
open={liveDemo}
TransitionComponent={Transition}
keepMounted
onClose={() => setLiveDemo(false)}
aria-labelledby="classic-modal-slide-title"
aria-describedby="classic-modal-slide-description"
>
<DialogTitle
id="classic-modal-slide-title"
disableTypography
className={classes.modalHeader}
>
<Button
simple
className={classes.modalCloseButton}
key="close"
aria-label="Close"
onClick={() => setLiveDemo(false)}
>
{" "}
<Close className={classes.modalClose} />
</Button>
<h4 className={classes.modalTitle}>Modal title</h4>
</DialogTitle>
<DialogContent
id="classic-modal-slide-description"
className={classes.modalBody}
>
<h4>Popover in a modal</h4>
<p>
This
<Button
color="secondary"
onClick={event => setAnchorElLeft(event.currentTarget)}
>
Button
</Button>
<Popover
classes={{
paper: classes.popover
}}
open={Boolean(anchorElLeft)}
anchorEl={anchorElLeft}
onClose={() => setAnchorElLeft(null)}
anchorOrigin={{
vertical: "center",
horizontal: "left"
}}
transformOrigin={{
vertical: "center",
horizontal: "right"
}}
>
<h3 className={classes.popoverHeader}>Popover on left</h3>
<div className={classes.popoverBody}>
Here will be some very useful information about his popover.
Here will be some very useful information about his popover.
</div>
</Popover>
triggers a popover on click.
</p>
<hr />
<h4>Tooltips in a modal</h4>
<p>
<Tooltip
id="ex-to-po-1"
title="Default tooltip"
placement="top"
classes={{ tooltip: classes.tooltip }}
>
<a href="#pablo" onClick={e => e.preventDefault()}>
{" "}
This link{" "}
</a>
</Tooltip>{" "}
and
<Tooltip
id="ex-to-po-2"
title="Default tooltip"
placement="top"
classes={{ tooltip: classes.tooltip }}
>
<a href="#pablo" onClick={e => e.preventDefault()}>
{" "}
that link{" "}
</a>
</Tooltip>
have tooltips on hover.
</p>
</DialogContent>
<DialogActions className={classes.modalFooter}>
<Button onClick={() => setLiveDemo(false)} color="secondary">
Close
</Button>
<Button color="primary">Save changes</Button>
</DialogActions>
</Dialog>
</div>
);
}
Modals have two optional sizes, available via modifier classes. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Slide from "@material-ui/core/Slide";
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent";
// @material-ui/icons
import Close from "@material-ui/icons/Close";
// core components
import Button from "components/CustomButtons/Button.js";
import style from "styles/jss/nextjs-material-kit-pro/pages/componentsSections/javascriptStyles.js";
const Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="down" ref={ref} {...props} />;
});
const useStyles = makeStyles(style);
export default function ExampleOptionalSizes() {
const [smallModal, setSmallModal] = React.useState(false);
const [largeModal, setLargeModal] = React.useState(false);
const classes = useStyles();
return (
<div>
<Button color="primary" onClick={() => setLargeModal(true)}>
Large Modal
</Button>
<Dialog
classes={{
root: classes.modalRoot,
paper: classes.modal + " " + classes.modalLarge
}}
open={largeModal}
TransitionComponent={Transition}
keepMounted
onClose={() => setLargeModal(false)}
aria-labelledby="large-modal-slide-title"
aria-describedby="large-modal-slide-description"
>
<DialogTitle
id="large-modal-slide-title"
disableTypography
className={classes.modalHeader}
>
<Button
simple
className={classes.modalCloseButton}
key="close"
aria-label="Close"
onClick={() => setLargeModal(false)}
>
{" "}
<Close className={classes.modalClose} />
</Button>
<h4 className={classes.modalTitle}>Large modal</h4>
</DialogTitle>
<DialogContent
id="large-modal-slide-description"
className={classes.modalBody}
>
<p>...</p>
</DialogContent>
</Dialog>
<Button color="primary" onClick={() => setSmallModal(true)}>
Small Modal
</Button>
<Dialog
classes={{
root: classes.modalRoot,
paper: classes.modal + " " + classes.modalSmall
}}
open={smallModal}
TransitionComponent={Transition}
keepMounted
onClose={() => setSmallModal(false)}
aria-labelledby="small-modal-slide-title"
aria-describedby="small-modal-slide-description"
>
<DialogTitle
id="small-modal-slide-title"
disableTypography
className={classes.modalHeader}
>
<Button
simple
className={classes.modalCloseButton}
key="close"
aria-label="Close"
onClick={() => setSmallModal(false)}
>
{" "}
<Close className={classes.modalClose} />
</Button>
<h4 className={classes.modalTitle}>Small modal</h4>
</DialogTitle>
<DialogContent
id="small-modal-slide-description"
className={classes.modalBody + " " + classes.modalSmallBody}
>
<p>...</p>
</DialogContent>
</Dialog>
</div>
);
}
For props please refer to material-ui's official documentation.