.webp)
React Bootstrap Modal / Popup
React Modal - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
React Bootstrap modal is lightweight, but powerful & multipurpose popup. Learn how to manipulate size, styles & position. Multiple examples and detailed tutorial.
The Modal is a dialog box/popup window which can be used for lightboxes, user notifications, UI enhancements, e-commerce components and many other cases.
It's easily customized. You can manipulate size, position, and content.
This documentation presents the basic options and examples of modals. If you need more advanced help have a look at additional pages of the documentation listed below:
Basic example
Below is a most basic Modal example with a button triggering Modal. Click the button to trigger Modal.
import React, { Component } from 'react';
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBModalHeader,
MDBModalFooter
} from 'mdbreact';
class ModalPage extends Component {
state = {
modal: false
}
toggle = () => {
this.setState({
modal: !this.state.modal
});
}
render() {
return (
<MDBContainer>
<MDBBtn onClick={this.toggle}>Modal</MDBBtn>
<MDBModal isOpen={this.state.modal} toggle={this.toggle}>
<MDBModalHeader toggle={this.toggle}>MDBModal title</MDBModalHeader>
<MDBModalBody>
(...)
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="secondary" onClick={this.toggle}>Close</MDBBtn>
<MDBBtn color="primary">Save changes</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Position and size
To change the position or size of the modal add one of the following props to the
modal component.
Central modal
Note: Medium size is a default value, so there isn't a dedicated prop for it.
size="sm" Small Modal
size="lg" Large Modal
size="fluid" Full Width Modal
import React, { Component } from 'react';
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBModalHeader,
MDBModalFooter
} from 'mdbreact';
class ModalPage extends Component {
state={
modal2: false,
modal3: false,
modal4: false,
modal5: false
}
toggle = nr => () => {
let modalNumber = 'modal' + nr
this.setState({
[modalNumber]: !this.state[modalNumber]
});
}
render() {
return (
<MDBContainer>
<MDBBtn color="primary" onClick={this.toggle(2)}>Medium modal</MDBBtn>
<MDBModal isOpen={this.state.modal2} toggle={this.toggle(2)}>
<MDBModalHeader toggle={this.toggle(2)}>MDBModal title</MDBModalHeader>
<MDBModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="secondary" onClick={this.toggle(2)}>Close</MDBBtn>
<MDBBtn color="primary">Save changes</MDBBtn>
</MDBModalFooter>
</MDBModal>
<MDBBtn color="primary" onClick={this.toggle(3)}>Small modal</MDBBtn>
<MDBModal isOpen={this.state.modal3} toggle={this.toggle(3)} size="sm">
<MDBModalHeader toggle={this.toggle(3)}>MDBModal title</MDBModalHeader>
<MDBModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="secondary" size="sm" onClick={this.toggle(3)}>Close</MDBBtn>
<MDBBtn color="primary" size="sm">Save changes</MDBBtn>
</MDBModalFooter>
</MDBModal>
<MDBBtn color="primary" onClick={this.toggle(4)}>Large modal</MDBBtn>
<MDBModal isOpen={this.state.modal4} toggle={this.toggle(4)} size="lg">
<MDBModalHeader toggle={this.toggle(4)}>MDBModal title</MDBModalHeader>
<MDBModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="secondary" onClick={this.toggle(4)}>Close</MDBBtn>
<MDBBtn color="primary">Save changes</MDBBtn>
</MDBModalFooter>
</MDBModal>
<MDBBtn color="primary" onClick={this.toggle(5)}>Fluid modal</MDBBtn>
<MDBModal isOpen={this.state.modal5} toggle={this.toggle(5)} size="fluid">
<MDBModalHeader toggle={this.toggle(5)}>MDBModal title</MDBModalHeader>
<MDBModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="secondary" onClick={this.toggle(5)}>Close</MDBBtn>
<MDBBtn color="primary">Save changes</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Side modal
Note 1: To make it works properly, apart from adding a prop for a position, you also need to
add special prop
side to
modal component.
Note 2: If you want to change modal position, add prop position equal
top,
right,
bottom or
left to the
modal component.
side +
position="top-right" Top Right
side +
position="top-left" Top Left
side +
position="bottom-right" Bottom Right
side +
position="bottom-left"
Bottom Left
import React, { Component } from 'react';
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBModalHeader,
MDBModalFooter
} from 'mdbreact';
class ModalPage extends Component {
state={
modal6: false,
modal7: false
}
toggle = nr => () => {
let modalNumber = 'modal' + nr
this.setState({
[modalNumber]: !this.state[modalNumber]
});
}
render() {
return (
<MDBContainer>
<MDBBtn color="secondary" onClick={this.toggle(6)}>Top right</MDBBtn>
<MDBModal isOpen={this.state.modal6} toggle={this.toggle(6)} side position="top-right">
<MDBModalHeader toggle={this.toggle(6)}>MDBModal title</MDBModalHeader>
<MDBModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="secondary" onClick={this.toggle(6)}>Close</MDBBtn>
<MDBBtn color="primary">Save changes</MDBBtn>
</MDBModalFooter>
</MDBModal>
<MDBBtn color="secondary" onClick={this.toggle(7)}>Bottom left</MDBBtn>
<MDBModal isOpen={this.state.modal7} toggle={this.toggle(7)} side position="bottom-left">
<MDBModalHeader toggle={this.toggle(7)}>MDBModal title</MDBModalHeader>
<MDBModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="secondary" onClick={this.toggle(7)}>Close</MDBBtn>
<MDBBtn color="primary">Save changes</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Fluid modal
Note: As in the previous example - to make it works properly, apart from adding a prop for a
position,
you also need to add special prop
fullHeight to
modal component.
Note 2: If you want to change modal position, add prop position equal
top,
right,
bottom or
left to the
modal component.
fullHeight +
position="right" Right
fullHeight +
position="left" Left
fullHeight +
position="bottom" Bottom
fullHeight +
position="top" Top
import React, { Component } from 'react';
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBModalHeader,
MDBModalFooter
} from 'mdbreact';
class ModalPage extends Component {
state = {
modal8: false,
modal9: false
}
toggle = nr => () => {
let modalNumber = 'modal' + nr
this.setState({
[modalNumber]: !this.state[modalNumber]
});
}
render() {
return (
<MDBContainer>
<MDBBtn color="info" onClick={this.toggle(8)}>Right</MDBBtn>
<MDBModal isOpen={this.state.modal8} toggle={this.toggle(8)} fullHeight position="right">
<MDBModalHeader toggle={this.toggle(8)}>MDBModal title</MDBModalHeader>
<MDBModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="secondary" onClick={this.toggle(8)}>Close</MDBBtn>
<MDBBtn color="primary">Save changes</MDBBtn>
</MDBModalFooter>
</MDBModal>
<MDBBtn color="info" onClick={this.toggle(9)}>Bottom</MDBBtn>
<MDBModal isOpen={this.state.modal9} toggle={this.toggle(9)} fullHeight position="bottom">
<MDBModalHeader toggle={this.toggle(9)}>MDBModal title</MDBModalHeader>
<MDBModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="secondary" onClick={this.toggle(9)}>Close</MDBBtn>
<MDBBtn color="primary">Save changes</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Frame modal
Note: As in the previous examples - to make it works properly, apart from adding a prop for a
position,
you also need to add special prop
frame to
modal component.
Note 2: If you want to change modal position, add prop position equal
top,
right,
bottom or
left to the
modal component.
frame +
position="bottom" Bottom
frame +
position="top" Top
import React, { Component } from 'react';
import { MDBContainer, MDBBtn, MDBModal, MDBModalBody } from 'mdbreact';
class ModalPage extends React.Component {
state = {
modal10: false,
modal11: false
}
toggle = nr => () => {
let modalNumber = 'modal' + nr
this.setState({
[modalNumber]: !this.state[modalNumber]
});
}
render() {
return (
<MDBContainer>
<MDBBtn color="warning" onClick={this.toggle(10)}>Bottom</MDBBtn>
<MDBModal isOpen={this.state.modal10} toggle={this.toggle(10)} frame position="bottom">
<MDBModalBody className="text-center">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
<MDBBtn color="secondary" onClick={this.toggle(10)}>Close</MDBBtn>
<MDBBtn color="primary">Save changes</MDBBtn>
</MDBModalBody>
</MDBModal>
<MDBBtn color="warning" onClick={this.toggle(11)}>Top</MDBBtn>
<MDBModal isOpen={this.state.modal11} toggle={this.toggle(11)} frame position="top">
<MDBModalBody className="text-center">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
<MDBBtn color="secondary" onClick={this.toggle(11)}>Close</MDBBtn>
<MDBBtn color="primary">Save changes</MDBBtn>
</MDBModalBody>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Remove backdrop
To remove backdrop add backdrop={false} prop to the modal markup
import React, { Component } from 'react';
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBModalHeader,
MDBModalFooter
} from 'mdbreact';
class ModalPage extends Component {
state = {
modal12: false
}
toggle = nr => () => {
let modalNumber = 'modal' + nr
this.setState({
[modalNumber]: !this.state[modalNumber]
});
}
render() {
return (
<MDBContainer>
<MDBBtn onClick={this.toggle(12)}>MDBModal</MDBBtn>
<MDBModal isOpen={this.state.modal12} toggle={this.toggle(12)} backdrop={false}>
<MDBModalHeader toggle={this.toggle(12)}>MDBModal title</MDBModalHeader>
<MDBModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="secondary" onClick={this.toggle(12)}>Close</MDBBtn>
<MDBBtn color="primary">Save changes</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Scrolling long content
When modal become too long for the user’s viewport or device, it scrolls independently of the page itself. Try the demo below.
import React, { Component } from 'react';
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBModalHeader,
MDBModalFooter
} from 'mdbreact';
class ModalPage extends Component {
state = {
modal13: false
}
toggle = nr => () => {
let modalNumber = 'modal' + nr
this.setState({
[modalNumber]: !this.state[modalNumber]
});
}
render() {
return (
<MDBContainer>
<MDBBtn color="primary" onClick={this.toggle(13)}>
Modal
</MDBBtn>
<MDBModal isOpen={this.state.modal13} toggle={this.toggle(13)}>
<MDBModalHeader toggle={this.toggle(13)}>
Modal title
</MDBModalHeader>
<MDBModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor
sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor
sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor
sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="secondary" onClick={this.toggle(13)}>
Close
</MDBBtn>
<MDBBtn color="primary">Save changes</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Vertically centered
Add
centered prop to
modal to vertically center the modal.
import React, { Component } from 'react';
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBModalHeader,
MDBModalFooter
} from 'mdbreact';
class ModalPage extends Component {
state = {
modal14: false
}
toggle = nr => () => {
let modalNumber = 'modal' + nr
this.setState({
[modalNumber]: !this.state[modalNumber]
});
}
render() {
return (
<MDBContainer>
<MDBBtn color="primary" onClick={this.toggle(14)}>MDBModal</MDBBtn>
<MDBModal isOpen={this.state.modal14} toggle={this.toggle(14)} centered>
<MDBModalHeader toggle={this.toggle(14)}>MDBModal title</MDBModalHeader>
<MDBModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="secondary" onClick={this.toggle(14)}>Close</MDBBtn>
<MDBBtn color="primary">Save changes</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Tooltips and popovers
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, { Component } from 'react';
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBModalHeader,
MDBModalFooter,
MDBPopover,
MDBPopoverBody,
MDBPopoverHeader,
MDBTooltip
} from 'mdbreact';
class ModalPage extends Component {
state = {
modal15: false
}
toggle = nr => () => {
let modalNumber = 'modal' + nr
this.setState({
[modalNumber]: !this.state[modalNumber]
});
}
render() {
return (
<MDBContainer>
<MDBBtn color="primary" onClick={this.toggle(15)}>MDBModal</MDBBtn>
<MDBModal isOpen={this.state.modal15} toggle={this.toggle(15)}>
<MDBModalHeader toggle={this.toggle(15)}>MDBModal title</MDBModalHeader>
<MDBModalBody>
This
<MDBPopover component="button" placement="right" popoverBody="button" tag="span" className="btn btn-secondary">
<MDBPopoverHeader>MDBPopover title</MDBPopoverHeader>
<MDBPopoverBody>MDBPopover body content is set in this attribute.</MDBPopoverBody>
</MDBPopover>
triggers a popover on click.
<hr />
<MDBTooltip placement="top" tag="a" component="span" tooltipContent="MDBTooltip">
This link
</MDBTooltip>
and
<MDBTooltip placement="top" tag="a" component="span" tooltipContent="MDBTooltip">
that link
</MDBTooltip>
have tooltips on hover.
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="secondary" onClick={this.toggle(15)}>Close</MDBBtn>
<MDBBtn color="primary">Save changes</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Using the grid
Utilize the Bootstrap grid system within a modal by nesting
Container fluid within the
ModalBody. Then, use the normal grid system classes as you would anywhere else.
import React, { Component } from 'react';
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBModalHeader,
MDBModalFooter,
MDBCol,
MDBRow
} from 'mdbreact';
class ModalPage extends Component {
state = {
modal16: false
}
toggle = nr => () => {
let modalNumber = 'modal' + nr
this.setState({
[modalNumber]: !this.state[modalNumber]
});
}
render() {
return (
<MDBContainer>
<MDBBtn onClick={this.toggle(16)}>MDBModal</MDBBtn>
<MDBModal isOpen={this.state.modal16} toggle={this.toggle(16)}>
<MDBModalHeader toggle={this.toggle(16)}>MDBModal title</MDBModalHeader>
<MDBModalBody>
<MDBContainer fluid className="text-white">
<MDBRow>
<MDBCol md="4" className="bg-info">.col-md-4</MDBCol>
<MDBCol md="4" className="ml-auto bg-info">.col-md-4 .ml-auto</MDBCol>
</MDBRow>
<br />
<MDBRow>
<MDBCol md="3" className="ml-auto bg-info">.col-md-3 .ml-auto</MDBCol>
<MDBCol md="2" className="ml-auto bg-info">.col-md-2 .ml-auto</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="6" className="ml-5 bg-info">.col-md-6 .ml-5</MDBCol>
</MDBRow>
<br />
<MDBRow>
<MDBCol sm="9" className="bg-info">
Level 1: .col-sm-9
<MDBRow>
<MDBCol sm="6" className="bg-info">
Level 2: .col-8 .col-sm-6
</MDBCol>
<MDBCol sm="6" className="bg-info">
Level 2: .col-4 .col-sm-6
</MDBCol>
</MDBRow>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="secondary" onClick={this.toggle(16)}>Close</MDBBtn>
<MDBBtn color="primary">Save changes</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
React Modal - API
In this section you will find advanced information about the Modal component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use in working with it.
Checkbox import statement
In order to use Checkbox component make sure you have imported proper module first.
import { Modal, ModalBody, ModalHeader, ModalFooter } from 'mdbreact';
Modal PropTypes
The table below shows the configuration options of the Modal component.
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
animation |
string | |
Changes direction of animation. Choose from top / bottom / right / left. | <Modal animation="left" ... /> |
autoFocus |
boolean | true |
Defines if modal should receive focus | <Modal autoFocus={false} ... /> |
backdrop |
boolean | true |
If false, the backdrop is not rendered. | <Modal backdrop={false} ... /> |
backdropClassName |
string | |
Adds custom class to modal-backdrop element | <Modal backdropClassName="myClass" ... /> |
backdropTransitionTimeout |
Allows to define a transition time for the backdrop | number |
Adds custom class to modal-backdrop element | <Modal backdropTransitionTimeout={5000} ... /> |
cascading |
boolean | false |
Adds cascading-class to modal-dialog element | <Modal cascading ... /> |
centered |
boolean | |
Add custom class to modal-dialog element | <Modal centered ... /> |
className |
string | |
Adds custom class to modal-content element | <Modal className="myClass" ... /> |
contentClassName |
string | |
Adds custom class to modal-content element | <Modal contentClassName="myClass" ... /> |
disableFocusTrap |
boolean | true |
If true, removes focus trap effect. | <Modal disableFocusTrap ... /> |
fade |
boolean | true |
Removes transition | <Modal fade={false} ... /> |
frame |
boolean | |
Changes the position of the modal. It has to be used along with position prop equal to bottom / top | <Modal frame position="bottom" ... /> |
fullHeight |
boolean | |
Changes the position of the modal. It has to be used along with position prop equal to right / bottom / left /top | <Modal fullHeight position="left" ... /> |
inline |
boolean | false |
Enables inline mode of the modal | <Modal isOpen={this.state.modal} ... /> |
isOpen |
boolean | false |
If true, the modal is open | <Modal isOpen={this.state.modal} ... /> |
keyboard |
boolean | true |
Closes the modal when the escape key is pressed. | <Modal keyboard={false} ... /> |
labelledBy |
string | |
Changes aria-labelledby attribute | <Modal labelledBy="myLabel" ... /> |
modalClassName |
string | |
Adds custom class to modal-dialog element | <Modal modalClassName="myClass" ... /> |
modalStyle |
string | |
Predefines modal style. Choose one of success / info / danger / warning. | <Modal modalStyle="info" ... /> |
noClickableBodyWithoutBackdrop |
boolean | |
Prevents clicking on body without a backdrop. | <Modal noClickableBodyWithoutBackdrop ... /> |
overflowScroll |
boolean | |
Enables modal scrolling in the Y axis. | <Modal overflowScroll ... /> |
position |
string | |
Changes the position of the modal | <Modal position="top-right" ... /> |
modalTransitionTimeout |
number | |
Defines a transition time for the modal animation. | <Modal modalTransitionTimeout={5000} ... /> |
side |
boolean | |
Changes the position of the modal. It has to be used along with position prop equal to top-right / bottom-right / bottom-left / top-left | <Modal side position="top-right" ... /> |
size |
string | |
Changes the size of the modal. Choose from sm / lg / fluid | <Modal size="lg" ... /> |
toggle |
function | |
Defines function which fires on close/open event | <Modal toggle={this.myFunction} ... /> |
wrapClassName |
string | |
Add custom class to wrapping container. | <Modal wrapClassName="myClass" ... /> |
hiddenModal |
function | |
This event is fired after the modal is closed. | <Modal hiddenModal={this.hiddenHandler} ... /> |
hideModal |
function | |
This event is fired just before the modal is hidden. | <Modal hideModal={this.hideHandler} ... /> |
showModal |
function | |
This event is fired just before the modal is open. | <Modal showModal={this.showHandler} ... /> |
disableBackdrop |
boolean | false |
Disable backdrop if this prop is true. | <Modal disableBackdrop ... /> |
ModalBody PropTypes
Name
Type
Default
Description
Example
classNamestring
Adds custom class to ModalBody component.
<ModalBody className="myClass" ... />
ModalFooter PropTypes
Name
Type
Default
Description
Example
classNamestring
Adds custom class to ModalFooter component.
<ModalFooter className="myClass" ... />
ModalHeader PropTypes
Name
Type
Default
Description
Example
classNamestring
Adds custom class to ModalHeader component .
<ModalHeader className="myClass" ... />
togglefunction
Defines function which fires on close/open event
<ModalHeader toggle="this.myFunction" ... />
tagstring
h4Defines custom tag for ModalHeader
<ModalHeader tag="h2" ... />
closeAriaLabelstring
CloseDeifines custom label for close button
<ModalHeader closeAriaLabel="myClass" ... />
titleClassstring
Adds custom class to title element.
<ModalHeader titleClass="myTitleClass" ... />
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
className |
string | |
Adds custom class to ModalBody component. | <ModalBody className="myClass" ... /> |
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
className |
string | |
Adds custom class to ModalFooter component. | <ModalFooter className="myClass" ... /> |
ModalHeader PropTypes
Name
Type
Default
Description
Example
classNamestring
Adds custom class to ModalHeader component .
<ModalHeader className="myClass" ... />
togglefunction
Defines function which fires on close/open event
<ModalHeader toggle="this.myFunction" ... />
tagstring
h4Defines custom tag for ModalHeader
<ModalHeader tag="h2" ... />
closeAriaLabelstring
CloseDeifines custom label for close button
<ModalHeader closeAriaLabel="myClass" ... />
titleClassstring
Adds custom class to title element.
<ModalHeader titleClass="myTitleClass" ... />
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
className |
string | |
Adds custom class to ModalHeader component . | <ModalHeader className="myClass" ... /> |
toggle |
function | |
Defines function which fires on close/open event | <ModalHeader toggle="this.myFunction" ... /> |
tag |
string | h4 |
Defines custom tag for ModalHeader | <ModalHeader tag="h2" ... /> |
closeAriaLabel |
string | Close |
Deifines custom label for close button | <ModalHeader closeAriaLabel="myClass" ... /> |
titleClass |
string | |
Adds custom class to title element. | <ModalHeader titleClass="myTitleClass" ... /> |
React Modals - examples & customization
Quickly get a project started with any of our examples.
Modal Cookies
import React, { Component } from "react";
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBIcon,
MDBRow,
} from "mdbreact";
class ModalPage extends Component {
state = {
modal1: false,
};
toggle = (nr) => () => {
let modalNumber = "modal" + nr;
this.setState({
[modalNumber]: !this.state[modalNumber],
});
};
render() {
return (
<MDBContainer>
<MDBBtn onClick={this.toggle(1)}>Launch MDBModal</MDBBtn>
<MDBModal
position="top"
backdrop={false}
frame
isOpen={this.state.modal1}
toggle={this.toggle(1)}
>
<MDBModalBody>
<MDBRow className="justify-content-center align-items-center">
<p className="pt-3 pr-2">
We use cookies to improve your website experience
</p>
<MDBBtn color="primary" onClick={this.toggle(1)}>
Learn more
<MDBIcon icon="book" className="ml-1" />
</MDBBtn>
<MDBBtn color="primary" outline onClick={this.toggle(1)}>
Ok, thanks
</MDBBtn>
</MDBRow>
</MDBModalBody>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Modal Coupon
import React, { Component } from "react";
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBIcon,
MDBRow,
MDBBadge,
} from "mdbreact";
class ModalPage extends Component {
state = {
modal2: false,
};
toggle = (nr) => () => {
let modalNumber = "modal" + nr;
this.setState({
[modalNumber]: !this.state[modalNumber],
});
};
render() {
return (
<MDBContainer>
<MDBBtn onClick={this.toggle(2)}>Launch MDBModal</MDBBtn>
<MDBModal
position="bottom"
backdrop={false}
frame
isOpen={this.state.modal2}
toggle={this.toggle(2)}
>
<MDBModalBody>
<MDBRow className="justify-content-center align-items-center">
<h3>
<MDBBadge color="success">v52gs1</MDBBadge>
</h3>
<p className="pt-3 mx-4">
We have a gift for you! Use this code to get a{" "}
<strong>10% discount</strong>.
</p>
<MDBBtn color="success" onClick={this.toggle(2)}>
Learn more
<MDBIcon icon="book" className="ml-1" />
</MDBBtn>
<MDBBtn color="success" outline onClick={this.toggle(2)}>
No, thanks
</MDBBtn>
</MDBRow>
</MDBModalBody>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Modal Discount
import React, { Component } from "react";
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBIcon,
MDBBadge,
MDBCol,
MDBRow,
MDBModalHeader,
ModalFooter,
} from "mdbreact";
class ModalPage extends Component {
state = {
modal3: false,
};
toggle = (nr) => () => {
let modalNumber = "modal" + nr;
this.setState({
[modalNumber]: !this.state[modalNumber],
});
};
render() {
return (
<MDBContainer>
<MDBBtn onClick={this.toggle(3)}>Launch MDBModal</MDBBtn>
<MDBModal
size="lg"
className="modal-notify modal-danger text-white"
side
position="bottom-right"
backdrop={false}
isOpen={this.state.modal3}
toggle={this.toggle(3)}
>
<MDBModalHeader tag="p" toggle={this.toggle(3)}>
Discount offer: <strong>10% off</strong>
</MDBModalHeader>
<MDBModalBody>
<MDBRow>
<MDBCol
size="3"
className="d-flex justify-content-center align-items-center"
>
<MDBIcon size="4x" icon="gift" className="ml-1" />
</MDBCol>
<MDBCol size="9">
<p>
Sharing is caring. Therefore, from time to time we like to
give our visitors small gifts. Today is one of those days.
</p>
<p>
<strong>
Copy the following code and use it at the checkout. It's
valid for <u>one day</u>.
</strong>
</p>
<h3>
<MDBBadge color="danger">v52gs1</MDBBadge>
</h3>
</MDBCol>
</MDBRow>
</MDBModalBody>
<ModalFooter className="justify-content-center">
<MDBBtn color="danger" onClick={this.toggle(3)}>
Get it now
<MDBIcon far icon="gem" className="ml-1 white-text" />
</MDBBtn>
<MDBBtn color="danger" outline onClick={this.toggle(3)}>
No, thanks
</MDBBtn>
</ModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Modal Related Content
Related article
.webp)
My travel to paradise
Lorem ipsum dolor sit amet consectetur adipisicing elit [...]
import React, { Component } from "react";
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBCol,
MDBRow,
MDBModalHeader,
} from "mdbreact";
class ModalPage extends Component {
state = {
modal3: false,
};
toggle = (nr) => () => {
let modalNumber = "modal" + nr;
this.setState({
[modalNumber]: !this.state[modalNumber],
});
};
render() {
return (
<MDBContainer>
<MDBBtn onClick={this.toggle(4)}>Launch MDBModal</MDBBtn>
<MDBModal
className="modal-notify modal-info text-white"
side
position="bottom-right"
backdrop={false}
isOpen={this.state.modal4}
toggle={this.toggle(4)}
>
<MDBModalHeader tag="p" toggle={this.toggle(4)}>
Related article
</MDBModalHeader>
<MDBModalBody>
<MDBRow>
<MDBCol size="5">
<img
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(55).webp"
className="img-fluid"
alt=""
/>
</MDBCol>
<MDBCol size="7">
<p>
<strong>My travel to paradise</strong>
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit...
</p>
<MDBBtn
color="primary"
size="md"
outline
onClick={this.toggle(4)}
>
Read more
</MDBBtn>
</MDBCol>
</MDBRow>
</MDBModalBody>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Modal Abandoned Cart
import React, { Component } from "react";
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBCol,
MDBRow,
MDBModalHeader,
ModalFooter,
MDBIcon,
} from "mdbreact";
class ModalPage extends Component {
state = {
modal5: false,
};
toggle = (nr) => () => {
let modalNumber = "modal" + nr;
this.setState({
[modalNumber]: !this.state[modalNumber],
});
};
render() {
return (
<MDBContainer>
<MDBBtn onClick={this.toggle(5)}>Launch MDBModal</MDBBtn>
<MDBModal
className="modal-notify modal-info text-white"
side
position="top-right"
backdrop={false}
isOpen={this.state.modal5}
toggle={this.toggle(5)}
>
<MDBModalHeader tag="p" toggle={this.toggle(5)}>
Product in the cart
</MDBModalHeader>
<MDBModalBody>
<MDBRow>
<MDBCol
size="3"
className="d-flex justify-content-center align-items-center"
>
<MDBIcon size="4x" icon="shopping-cart" className="ml-1" />
</MDBCol>
<MDBCol size="9">
<p>Do you need more time to make a purchase decision?</p>
<p>
No pressure, your product will be waiting for you in the cart.
</p>
</MDBCol>
</MDBRow>
</MDBModalBody>
<ModalFooter className="justify-content-center">
<MDBBtn color="primary" onClick={this.toggle(5)}>
Go to cart
</MDBBtn>
<MDBBtn color="primary" outline onClick={this.toggle(5)}>
Cancel
</MDBBtn>
</ModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Modal Confirm Delete
import React, { Component } from "react";
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBCol,
MDBRow,
MDBModalHeader,
MDBModalFooter,
MDBIcon,
} from "mdbreact";
class ModalPage extends Component {
state = {
modal6: false,
};
toggle = (nr) => () => {
let modalNumber = "modal" + nr;
this.setState({
[modalNumber]: !this.state[modalNumber],
});
};
render() {
return (
<MDBContainer>
<MDBBtn onClick={this.toggle(6)}>Launch MDBModal</MDBBtn>
<MDBModal
modalStyle="danger"
className="text-white"
size="sm"
side
position="top-right"
backdrop={false}
isOpen={this.state.modal6}
toggle={this.toggle(6)}
>
<MDBModalHeader
className="text-center"
titleClass="w-100"
tag="p"
toggle={this.toggle(6)}
>
Are you sure?
</MDBModalHeader>
<MDBModalBody className="text-center">
<MDBIcon icon="times" size="4x" className="animated rotateIn" />
</MDBModalBody>
<MDBModalFooter className="justify-content-center">
<MDBBtn color="danger" onClick={this.toggle(6)}>
Yes
</MDBBtn>
<MDBBtn color="danger" outline onClick={this.toggle(6)}>
No
</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Modal Poll
import React, { Component } from "react";
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBInput,
MDBModalHeader,
MDBModalFooter,
MDBIcon,
} from "mdbreact";
class ModalPage extends Component {
state = {
modal9: false,
};
toggle = (nr) => () => {
let modalNumber = "modal" + nr;
this.setState({
[modalNumber]: !this.state[modalNumber],
});
};
render() {
return (
<MDBContainer>
<MDBBtn onClick={this.toggle(9)}>Launch MDBModal</MDBBtn>
<MDBModal
fullHeight
position="right"
backdrop={false}
className="modal-notify modal-info text-white"
isOpen={this.state.modal9}
toggle={this.toggle(9)}
>
<MDBModalHeader tag="p" toggle={this.toggle(9)}>
Feedback request
</MDBModalHeader>
<MDBModalBody className="text-center">
<MDBIcon
far
icon="file-alt"
size="4x"
className="animated rotateIn mb-3"
/>
<p className="font-weight-bold mb-3">Your opinion matters</p>
<p>
Have some ideas how to improve our product? Give us your feedback.
</p>
<hr />
<p className="mb-3">Your rating</p>
<div className="text-left">
<MDBInput label="Very good" type="radio" id="radio1" />
<MDBInput label="Good" type="radio" id="radio2" />
<MDBInput label="Mediocre" type="radio" id="radio3" />
<MDBInput label="Bad" type="radio" id="radio4" />
<MDBInput label="Very bad" type="radio" id="radio5" />
</div>
<p className="mb-3">What could we improve?</p>
<MDBInput label="Your message" type="textarea" id="radio1" />
</MDBModalBody>
<MDBModalFooter className="justify-content-center">
<MDBBtn color="primary" onClick={this.toggle(9)}>
Send
<MDBIcon icon="paper-plane" className="ml-1" />
</MDBBtn>
<MDBBtn color="primary" outline onClick={this.toggle(9)}>
Calcel
</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Modal Cart
import React, { Component } from "react";
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBTableHead,
MDBModalHeader,
MDBModalFooter,
MDBTable,
TableBody,
MDBIcon,
} from "mdbreact";
class ModalPage extends Component {
state = {
modal10: false,
};
toggle = (nr) => () => {
let modalNumber = "modal" + nr;
this.setState({
[modalNumber]: !this.state[modalNumber],
});
};
render() {
return (
<MDBContainer>
<MDBBtn onClick={this.toggle(10)}>Launch MDBModal</MDBBtn>
<MDBModal isOpen={this.state.modal10} toggle={this.toggle(10)}>
<MDBModalHeader toggle={this.toggle(10)}>Your cart</MDBModalHeader>
<MDBModalBody>
<MDBTable striped>
<MDBTableHead>
<tr>
<th></th>
<th>Product name</th>
<th>Price</th>
<th>Remove</th>
</tr>
</MDBTableHead>
<TableBody>
<tr>
<td>1</td>
<td>Product 1</td>
<td>100$</td>
<td>
<MDBIcon icon="times" />
</td>
</tr>
<tr>
<td>2</td>
<td>Product 2</td>
<td>1 340$</td>
<td>
<MDBIcon icon="times" />
</td>
</tr>
<tr>
<td>3</td>
<td>Product 3</td>
<td>30$</td>
<td>
<MDBIcon icon="times" />
</td>
</tr>
<tr>
<td></td>
<td>
<strong>Total</strong>
</td>
<td>
<strong>1 470$</strong>
</td>
<td></td>
</tr>
</TableBody>
</MDBTable>
</MDBModalBody>
<MDBModalFooter className="justify-content-end">
<MDBBtn color="primary" outline onClick={this.toggle(10)}>
Close
</MDBBtn>
<MDBBtn color="primary" onClick={this.toggle(10)}>
Checkout
</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Modal Push
import React, { Component } from "react";
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBModalFooter,
MDBModalHeader,
MDBIcon,
} from "mdbreact";
class ModalPage extends Component {
state = {
modal7: false,
};
toggle = (nr) => () => {
let modalNumber = "modal" + nr;
this.setState({
[modalNumber]: !this.state[modalNumber],
});
};
render() {
return (
<MDBContainer>
<MDBBtn onClick={this.toggle(7)}>Launch MDBModal</MDBBtn>
<MDBModal
className="modal-notify modal-info text-white"
isOpen={this.state.modal7}
toggle={this.toggle(7)}
>
<MDBModalHeader className="text-center" titleClass="w-100" tag="p">
Be always up to date
</MDBModalHeader>
<MDBModalBody className="text-center">
<MDBIcon icon="bell" size="4x" className="animated rotateIn mb-4" />
<p>
Do you want to receive the push notification about the newest
posts?
</p>
</MDBModalBody>
<MDBModalFooter className="justify-content-center">
<MDBBtn color="primary" onClick={this.toggle(7)}>
Yes
</MDBBtn>
<MDBBtn color="primary" outline onClick={this.toggle(7)}>
No
</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Modal YouTube
import React, { Component } from "react";
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBModalFooter,
MDBIcon,
MDBIframe,
} from "mdbreact";
class ModalPage extends Component {
state = {
modal11: false,
};
toggle = (nr) => () => {
let modalNumber = "modal" + nr;
this.setState({
[modalNumber]: !this.state[modalNumber],
});
};
render() {
return (
<MDBContainer>
<MDBBtn onClick={this.toggle(11)}>Launch MDBModal</MDBBtn>
<MDBModal
size="lg"
isOpen={this.state.modal11}
toggle={this.toggle(11)}
>
<MDBModalBody className="mb-0 p-0">
<div className="embed-responsive embed-responsive-16by9 z-depth-1-half">
<MDBIframe src="https://www.youtube.com/embed/A3PDXmYoF5U" />
</div>
</MDBModalBody>
<MDBModalFooter className="justify-content-center">
<span className="mr-4">Spread the word!</span>
<MDBBtn tag="a" size="sm" floating social="fb">
<MDBIcon fab icon="facebook-f" />
</MDBBtn>
<MDBBtn tag="a" size="sm" floating social="tw">
<MDBIcon fab icon="twitter" />
</MDBBtn>
<MDBBtn tag="a" size="sm" floating social="gplus">
<MDBIcon fab icon="google-plus-g" />
</MDBBtn>
<MDBBtn tag="a" size="sm" floating social="li">
<MDBIcon fab icon="linkedin-in" />
</MDBBtn>
<MDBBtn
color="primary"
outline
rounded
size="md"
className="ml-4"
onClick={this.toggle(11)}
>
Close
</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Modal Vimeo
import React, { Component } from "react";
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBModalFooter,
MDBIcon,
MDBIframe,
} from "mdbreact";
class ModalPage extends Component {
state = {
modal12: false,
};
toggle = (nr) => () => {
let modalNumber = "modal" + nr;
this.setState({
[modalNumber]: !this.state[modalNumber],
});
};
render() {
return (
<MDBContainer>
<MDBBtn onClick={this.toggle(12)}>Launch MDBModal</MDBBtn>
<MDBModal
size="lg"
isOpen={this.state.modal12}
toggle={this.toggle(12)}
>
<MDBModalBody className="mb-0 p-0">
<MDBIframe src="https://player.vimeo.com/video/115098447" />
</MDBModalBody>
<MDBModalFooter className="justify-content-center">
<span className="mr-4">Spread the word!</span>
<MDBBtn tag="a" size="sm" floating social="fb">
<MDBIcon fab icon="facebook-f" />
</MDBBtn>
<MDBBtn tag="a" size="sm" floating social="tw">
<MDBIcon fab icon="twitter" />
</MDBBtn>
<MDBBtn tag="a" size="sm" floating social="gplus">
<MDBIcon fab icon="google-plus-g" />
</MDBBtn>
<MDBBtn tag="a" size="sm" floating social="li">
<MDBIcon fab icon="linkedin-in" />
</MDBBtn>
<MDBBtn
color="primary"
outline
rounded
size="md"
className="ml-4"
onClick={this.toggle(12)}
>
Close
</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Modal Product
.webp)
.webp)
.webp)
Product Name
$49
$89
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
import React, { Component } from "react";
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBCol,
MDBCarouselInner,
MDBCard,
MDBCardBody,
MDBCarousel,
MDBModalBody,
MDBCollapseHeader,
MDBCarouselItem,
MDBSelectOption,
MDBSelectOptions,
MDBRow,
MDBSelect,
MDBSelectInput,
MDBCollapse,
MDBIcon,
} from "mdbreact";
class ModalPage extends Component {
state = {
modal13: false,
accordion: 1,
};
toggle = (nr) => () => {
let modalNumber = "modal" + nr;
this.setState({
[modalNumber]: !this.state[modalNumber],
});
};
onClick = (nr) => () => {
this.setState({
accordion: nr,
});
};
render() {
const { accordion } = this.state;
return (
<MDBContainer>
<MDBBtn onClick={this.toggle(13)}>Launch MDBModalBody</MDBBtn>
<MDBModal
size="lg"
isOpen={this.state.modal13}
toggle={this.toggle(13)}
>
<MDBModalBody className="d-flex">
<MDBCol size="5" lg="5">
<MDBCarousel
activeItem={1}
length={3}
showControls={true}
showIndicators={true}
thumbnails
className="z-depth-1"
>
<MDBCarouselInner>
<MDBCarouselItem itemId="1">
<img
className="d-block w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(23).webp"
alt="First slide"
/>
</MDBCarouselItem>
<MDBCarouselItem itemId="2">
<img
className="d-block w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(24).webp"
alt="Second slide"
/>
</MDBCarouselItem>
<MDBCarouselItem itemId="3">
<img
className="d-block w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(25).webp"
alt="Third slide"
/>
</MDBCarouselItem>
</MDBCarouselInner>
</MDBCarousel>
</MDBCol>
<MDBCol size="7" lg="7">
<h2 className="h2-responsive product-name">
<strong>Product Name</strong>
</h2>
<h4 className="h4-responsive">
<span className="green-text">
<strong>$49</strong>
</span>
<span className="grey-text ml-1">
<small>
<s>$89</s>
</small>
</span>
</h4>
<div className="my-4">
<MDBCard>
<MDBCollapseHeader onClick={this.onClick(1)}>
Description
<i
className={`ml-1 ${
accordion === 1
? "fa fa-angle-down rotate-icon"
: "fa fa-angle-down"
}`}
></i>
</MDBCollapseHeader>
<MDBCollapse isOpen={accordion === 1}>
<MDBCardBody>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus terry richardson ad squid. 3 wolf moon officia
aute, non cupidatat skateboard dolor brunch. Food truck
quinoa nesciunt laborum eiusmod.
</MDBCardBody>
</MDBCollapse>
</MDBCard>
<MDBCard>
<MDBCollapseHeader onClick={this.onClick(2)}>
Details
<i
className={
"ml-1" +
(accordion === 2
? "fa fa-angle-down rotate-icon"
: "fa fa-angle-down")
}
></i>
</MDBCollapseHeader>
<MDBCollapse isOpen={accordion === 2}>
<MDBCardBody>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus terry richardson ad squid. 3 wolf moon officia
aute, non cupidatat skateboard dolor brunch. Food truck
quinoa nesciunt laborum eiusmod.
</MDBCardBody>
</MDBCollapse>
</MDBCard>
<MDBCard>
<MDBCollapseHeader onClick={this.onClick(3)}>
Shipping
<i
className={`ml-1 ${
accordion === 1
? "fa fa-angle-down rotate-icon"
: "fa fa-angle-down"
}`}
></i>
</MDBCollapseHeader>
<MDBCollapse isOpen={accordion === 3}>
<MDBCardBody>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus terry richardson ad squid. 3 wolf moon officia
aute, non cupidatat skateboard dolor brunch. Food truck
quinoa nesciunt laborum eiusmod.
</MDBCardBody>
</MDBCollapse>
</MDBCard>
</div>
<MDBRow>
<MDBCol
size="
6"
>
<MDBSelect>
<MDBSelectInput></MDBSelectInput>
<MDBSelectOptions>
<MDBSelectOption disabled>
Choose your option
</MDBSelectOption>
<MDBSelectOption>White</MDBSelectOption>
<MDBSelectOption>Black</MDBSelectOption>
<MDBSelectOption>Pink</MDBSelectOption>
</MDBSelectOptions>
</MDBSelect>
<label>MDBSelect color</label>
</MDBCol>
<MDBCol size="6">
<MDBSelect>
<MDBSelectInput></MDBSelectInput>
<MDBSelectOptions>
<MDBSelectOption disabled>
Choose your option
</MDBSelectOption>
<MDBSelectOption>White</MDBSelectOption>
<MDBSelectOption>Black</MDBSelectOption>
<MDBSelectOption>Pink</MDBSelectOption>
</MDBSelectOptions>
</MDBSelect>
<label>MDBSelect size</label>
</MDBCol>
</MDBRow>
<MDBRow className="justify-content-center">
<MDBBtn
color="secondary"
className="ml-4"
onClick={this.toggle(13)}
>
Close
</MDBBtn>
<MDBBtn
color="primary"
className="ml-4"
onClick={this.toggle(13)}
>
Add to Cart
<MDBIcon icon="cart-plus" className="ml-2" />
</MDBBtn>
</MDBRow>
</MDBCol>
</MDBModalBody>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Modal Social Share
import React, { Component } from "react";
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBModalHeader,
MDBIcon,
} from "mdbreact";
class ModalPage extends Component {
state = {
modal8: false,
};
toggle = (nr) => () => {
let modalNumber = "modal" + nr;
this.setState({
[modalNumber]: !this.state[modalNumber],
});
};
render() {
return (
<MDBContainer>
<MDBBtn onClick={this.toggle(8)}>Launch Modal</MDBBtn>
<MDBModal cascading isOpen={this.state.modal8} toggle={his.toggle(8)}>
<MDBModalHeader
className="text-center text-white light-blue darken-3"
titleClass="w-100"
tag="h5"
toggle={this.toggle(8)}
>
<MDBIcon icon="users" className="text-white mr-2" />
Spreed the word!
</MDBModalHeader>
<MDBModalBody className="text-center">
<MDBBtn tag="a" floating social="fb">
<MDBIcon fab icon="facebook-f" />
</MDBBtn>
<MDBBtn tag="a" floating social="tw">
<MDBIcon fab icon="twitter" />
</MDBBtn>
<MDBBtn tag="a" floating social="gplus">
<MDBIcon fab icon="google-plus-g" />
</MDBBtn>
<MDBBtn tag="a" floating social="li">
<MDBIcon fab icon="linkedin-in" />
</MDBBtn>
<MDBBtn tag="a" floating social="ins">
<MDBIcon fab icon="instagram" />
</MDBBtn>
<MDBBtn tag="a" floating social="pin">
<MDBIcon fab icon="pinterest" />
</MDBBtn>
<MDBBtn tag="a" floating social="yt">
<MDBIcon fab icon="youtube" />
</MDBBtn>
<MDBBtn tag="a" floating social="dribble">
<MDBIcon fab icon="dribbble" />
</MDBBtn>
<MDBBtn tag="a" floating social="vk">
<MDBIcon fab icon="vk" />
</MDBBtn>
<MDBBtn tag="a" floating social="so">
<MDBIcon fab icon="stack-overflow" />
</MDBBtn>
<MDBBtn tag="a" floating social="slack">
<MDBIcon fab icon="slack" />
</MDBBtn>
<MDBBtn tag="a" floating social="git">
<MDBIcon fab icon="github" />
</MDBBtn>
<MDBBtn tag="a" floating social="comm">
<MDBIcon icon="comments" />
</MDBBtn>
<MDBBtn tag="a" floating social="email">
<MDBIcon icon="envelope" />
</MDBBtn>
</MDBModalBody>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Simple Modal Login
import React, { Component } from "react";
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBModalHeader,
MDBInput,
MDBModalFooter,
} from "mdbreact";
import "./index.css";
class ModalPage extends Component {
state = {
modal1: false,
};
toggle = (nr) => () => {
let modalNumber = "modal" + nr;
this.setState({
[modalNumber]: !this.state[modalNumber],
});
};
render() {
return (
<MDBContainer>
<MDBBtn rounded onClick={this.toggle(1)}>
Launch MDBModal Login Form
</MDBBtn>
<MDBModal isOpen={this.state.modal1} toggle={this.toggle(1)}>
<MDBModalHeader
className="text-center"
titleClass="w-100 font-weight-bold"
toggle={this.toggle(1)}
>
Sign in
</MDBModalHeader>
<MDBModalBody>
<form className="mx-3 grey-text">
<MDBInput
label="Type your email"
icon="envelope"
group
type="email"
validate
error="wrong"
success="right"
/>
<MDBInput
label="Type your password"
icon="lock"
group
type="password"
validate
/>
</form>
</MDBModalBody>
<MDBModalFooter className="justify-content-center">
<MDBBtn onClick={this.toggle(1)}>Login</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Simple Modal Register
import React, { Component } from "react";
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBModalHeader,
MDBInput,
MDBModalFooter,
} from "mdbreact";
class ModalPage extends Component {
state = {
modal2: false,
};
toggle = (nr) => () => {
let modalNumber = "modal" + nr;
this.setState({
[modalNumber]: !this.state[modalNumber],
});
};
render() {
return (
<MDBContainer>
<MDBBtn rounded onClick={this.toggle(2)}>
Launch Modal Register Form
</MDBBtn>
<MDBModal isOpen={this.state.modal2} toggle={this.toggle(2)}>
<MDBModalHeader
className="text-center"
titleClass="w-100 font-weight-bold"
toggle={this.toggle(2)}
>
Sign in
</MDBModalHeader>
<MDBModalBody>
<form className="mx-3 grey-text">
<MDBInput
label="Your name"
icon="user"
group
type="text"
validate
error="wrong"
success="right"
/>
<MDBInput
label="Your email"
icon="envelope"
group
type="email"
validate
error="wrong"
success="right"
/>
<MDBInput
label="Your password"
icon="lock"
group
type="password"
validate
/>
</form>
</MDBModalBody>
<MDBModalFooter className="justify-content-center">
<MDBBtn color="deep-orange" onClick={this.toggle(2)}>
SIGN UP
</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Simple Modal Subscription
import React, { Component } from "react";
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBModalHeader,
MDBInput,
MDBModalFooter,
MDBIcon,
} from "mdbreact";
class ModalPage extends Component {
state = {
modal2: false,
};
toggle = (nr) => () => {
let modalNumber = "modal" + nr;
this.setState({
[modalNumber]: !this.state[modalNumber],
});
};
render() {
return (
<MDBContainer>
<MDBBtn rounded onClick={this.toggle(3)}>
Launch Modal subscription Form
</MDBBtn>
<MDBModal isOpen={this.state.modal3} toggle={this.toggle(3)}>
<MDBModalHeader
className="text-center"
titleClass="w-100 font-weight-bold"
toggle={this.toggle(3)}
>
Subscribe
</MDBModalHeader>
<MDBModalBody>
<form className="mx-3 grey-text">
<MDBInput
label="Your name"
icon="user"
group
type="text"
validate
/>
<MDBInput
label="Your email"
icon="envelope"
group
type="email"
validate
error="wrong"
success="right"
/>
</form>
</MDBModalBody>
<MDBModalFooter className="justify-content-center">
<MDBBtn color="indigo" onClick={this.toggle(3)}>
Send
<MDBIcon far icon="paper-plane" className="ml-2" />
</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Simple Modal Contact
import React, { Component } from "react";
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBModalHeader,
MDBInput,
MDBModalFooter,
MDBIcon,
} from "mdbreact";
class ModalPage extends Component {
state = {
modal4: false,
};
toggle = (nr) => () => {
let modalNumber = "modal" + nr;
this.setState({
[modalNumber]: !this.state[modalNumber],
});
};
render() {
return (
<MDBContainer>
<MDBBtn rounded onClick={this.toggle(4)}>
Launch Modal Contact Form
</MDBBtn>
<MDBModal isOpen={this.state.modal4} toggle={this.toggle(4)}>
<MDBModalHeader
className="text-center"
titleClass="w-100 font-weight-bold"
toggle={this.toggle(4)}
>
Write to us
</MDBModalHeader>
<MDBModalBody>
<form className="mx-3 grey-text">
<MDBInput
label="Your name"
icon="user"
group
type="text"
validate
/>
<MDBInput
label="Your email"
icon="envelope"
group
type="email"
validate
error="wrong"
success="right"
/>
<MDBInput label="Your Subject" icon="tag" group type="text" />
<MDBInput
type="textarea"
rows="2"
label="Your message"
icon="pencil-alt"
/>
</form>
</MDBModalBody>
<MDBModalFooter className="justify-content-center">
<MDBBtn color="unique" onClick={this.toggle(4)}>
Send
<MDBIcon far icon="paper-plane" className="ml-2" />
</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Cascading Modal Register / Login MDB Pro component
import React, { Component } from "react";
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBNav,
MDBNavItem,
MDBNavLink,
MDBInput,
MDBModalFooter,
MDBIcon,
MDBTabContent,
MDBTabPane,
MDBRow,
} from "mdbreact";
class ModalPage extends Component {
state = {
modal1: false,
activeItem: "1",
};
toggle = (nr) => () => {
let modalNumber = "modal" + nr;
this.setState({
[modalNumber]: !this.state[modalNumber],
});
};
toggleTab = (nr) => () => {
this.setState({
activeItem: nr,
});
};
render() {
return (
<MDBContainer>
<MDBBtn rounded onClick={this.toggle(1)}>
Launch MDBModal Login/Register
</MDBBtn>
<MDBModal
className="form-cascading"
isOpen={this.state.modal1}
toggle={this.toggle(1)}
>
<MDBNav
tabs
className="md-tabs nav-justified tabs-2 light-blue darken-3"
style={{ margin: "-1.5rem 1rem 0 1rem" }}
>
<MDBNavItem>
<MDBNavLink
className={this.state.activeItem === 1 ? "active" : ""}
to="#"
onClick={this.toggleTab("1")}
>
<MDBIcon icon="user" className="mr-1" />
Login
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
className={this.state.activeItem === 2 ? "active" : ""}
to="#"
onClick={this.toggleTab("2")}
>
<MDBIcon icon="user-plus" className="mr-1" />
Register
</MDBNavLink>
</MDBNavItem>
</MDBNav>
<MDBTabContent activeItem={this.state.activeItem}>
<MDBTabPane tabId="1">
<MDBModalBody className="mx-3">
<form className=" mx-3 grey-text">
<MDBInput
label="Your email"
icon="envelope"
group
type="email"
validate
error="wrong"
success="right"
/>
<MDBInput
label="Your password"
icon="lock"
group
type="password"
validate
/>
</form>
</MDBModalBody>
<MDBModalFooter className="justify-content-center mx-3">
<MDBBtn className="mb-4" color="info" onClick={this.toggle(3)}>
LOG IN
<MDBIcon icon="sign-in-alt" className="ml-1" />
</MDBBtn>
<MDBRow
className="w-100 justify-content-start pt-4"
style={{ borderTop: "1px solid #e9ecef" }}
>
<div id="options">
<p className="font-small grey-text">
Not a member?{" "}
<span
className="blue-text ml-1"
onClick={this.toggleTab("2")}
>
Sign Up
</span>
</p>
<p className="font-small grey-text">
Forgot <span className="blue-text ml-1">password?</span>
</p>
</div>
<MDBBtn outline color="info" onClick={this.toggle(1)}>
CLOSE
</MDBBtn>
</MDBRow>
</MDBModalFooter>
</MDBTabPane>
<MDBTabPane tabId="2">
<MDBModalBody className="mx-3">
<form className=" mx-3 grey-text">
<MDBInput
label="Your email"
icon="envelope"
group
type="email"
validate
error="wrong"
success="right"
/>
<MDBInput
label="Your password"
icon="lock"
group
type="password"
validate
/>
<MDBInput
label="Repeat password"
icon="lock"
group
type="password"
validate
/>
</form>
</MDBModalBody>
<MDBModalFooter className="justify-content-center mx-3">
<MDBBtn className="mb-4" color="info" onClick={this.toggle(3)}>
SIGN UP
<MDBIcon icon="sign-in-alt" className="ml-1" />
</MDBBtn>
<MDBRow
className="w-100 justify-content-start pt-4"
style={{ borderTop: "1px solid #e9ecef" }}
>
<div id="options">
<p className="font-small grey-text">
Already have an account?
<span
className="blue-text ml-1"
onClick={this.toggleTab("1")}
>
Log in
</span>
</p>
</div>
<MDBBtn outline color="info" onClick={this.toggleTab("1")}>
CLOSE
</MDBBtn>
</MDBRow>
</MDBModalFooter>
</MDBTabPane>
</MDBTabContent>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
/* Cascading modal register / login */
.form-cascading .modal-footer{
border-top: none;
flex-direction: column;
}
.form-cascading #options {
margin-right: auto;
}
.form-cascading #options p {
margin-bottom: 0;
}
.form-cascading #options p span{
cursor: pointer;
}
Modal With Avatar
Maria Doe
import React, { Component } from "react";
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBModalHeader,
MDBInput,
MDBModalFooter,
MDBIcon,
} from "mdbreact";
class ModalPage extends Component {
state = {
modal5: false,
};
toggle = (nr) => () => {
let modalNumber = "modal" + nr;
this.setState({
[modalNumber]: !this.state[modalNumber],
});
};
render() {
return (
<MDBContainer>
<MDBBtn rounded onClick={this.toggle(5)}>
Launch Modal Login With Avatar
</MDBBtn>
<MDBModal
size="sm"
cascading
className="modal-avatar"
isOpen={this.state.modal5}
toggle={this.toggle(5)}
>
<MDBModalHeader className="mx-auto">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img%20%281%29.webp"
alt="avatar"
className="rounded-circle img-responsive"
/>
</MDBModalHeader>
<MDBModalBody className="text-center mb-1">
<h5 className="mt-1 mb-2">Maria Doe</h5>
<form className="mx-3 grey-text">
<MDBInput label="Enter password" group type="password" validate />
</form>
</MDBModalBody>
<MDBModalFooter className="justify-content-center">
<MDBBtn color="cyan" onClick={this.toggle(5)}>
Login
<MDBIcon icon="sign-in-alt" className="ml-2" />
</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Subscription Modal With Orange Header
import React, { Component } from "react";
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBModalHeader,
MDBInput,
MDBModalFooter,
MDBIcon,
} from "mdbreact";
class ModalPage extends Component {
state = {
modal5: false,
};
toggle = (nr) => () => {
let modalNumber = "modal" + nr;
this.setState({
[modalNumber]: !this.state[modalNumber],
});
};
render() {
return (
<MDBContainer>
<MDBBtn rounded onClick={this.toggle(6)}>
Launch Modal Subscription
</MDBBtn>
<MDBModal
className="modal-notify modal-warning white-text"
isOpen={this.state.modal6}
toggle={this.toggle(6)}
>
<MDBModalHeader
className="text-center"
titleClass="w-100 font-weight-bold"
toggle={this.toggle(6)}
>
Subscribe
</MDBModalHeader>
<MDBModalBody>
<form className="mx-3 grey-text">
<MDBInput
label="Your name"
icon="user"
iconClass="grey-text"
group
type="text"
validate
error="wrong"
success="right"
/>
<MDBInput
label="Your email"
icon="envelope"
iconClass="grey-text"
group
type="email"
validate
error="wrong"
success="right"
/>
</form>
</MDBModalBody>
<MDBModalFooter className="justify-content-center">
<MDBBtn color="warning" outline onClick={this.toggle(6)}>
Send
<MDBIcon far icon="paper-plane" className="ml-2" />
</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Elegant Modal Login MDB Pro component
import React, { Component } from "react";
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBModalHeader,
MDBInput,
MDBModalFooter,
MDBIcon,
MDBRow,
} from "mdbreact";
import "./index.css";
class ModalPage extends Component {
state = {
modal2: false,
};
toggle = (nr) => () => {
let modalNumber = "modal" + nr;
this.setState({
[modalNumber]: !this.state[modalNumber],
});
};
render() {
return (
<MDBContainer>
<MDBBtn rounded onClick={this.toggle(2)}>
Launch Modal Login Form
</MDBBtn>
<MDBModal
className="form-elegant"
isOpen={this.state.modal2}
toggle={this.toggle(2)}
>
<MDBModalHeader
className="text-center"
titleClass="w-100 font-weight-bold my-3"
toggle={this.toggle(2)}
>
Sign in
</MDBModalHeader>
<MDBModalBody className="mx-3">
<form className=" mx-3 grey-text">
<MDBInput label="Your email" group type="email" validate />
<MDBInput label="Your password" group type="password" validate />
<p className="font-small blue-text text-right">
Forgot password?
</p>
</form>
</MDBModalBody>
<MDBModalFooter className="justify-content-center mx-4">
<MDBBtn block rounded gradient="blue" onClick={this.toggle(2)}>
SIGN IN
</MDBBtn>
<p className="font-small dark-grey-text my-4">or Sign in with:</p>
<MDBRow className="py-3">
<MDBBtn rounded color="white" className="mr-md-3">
<MDBIcon
fab
icon="facebook-f"
className="text-center blue-text"
/>
</MDBBtn>
<MDBBtn rounded color="white" className="mr-md-3">
<MDBIcon fab icon="twitter" className="text-center blue-text" />
</MDBBtn>
<MDBBtn rounded color="white" className="mr-md-3">
<MDBIcon
fab
icon="google-plus-g"
className="text-center blue-text"
/>
</MDBBtn>
</MDBRow>
<MDBRow
className="mx-5 w-100 py-3 justify-content-end"
style={{ borderTop: "1px solid #e9ecef" }}
>
<p className="font-small grey-text">
Not a member? <span className="blue-text ml-1"> Sign Up</span>
</p>
</MDBRow>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
/* Elegant modal login */
.form-elegant .modal-header {
border-bottom: none;
}
.form-elegant .modal-footer{
border-top: none;
flex-direction: column;
}
.form-elegant .font-small {
font-size: 0.8rem;
}
Dark Modal Register MDB Pro component
import React, { Component } from "react";
import {
MDBContainer,
MDBBtn,
MDBModal,
MDBModalBody,
MDBModalHeader,
MDBInput,
MDBModalFooter,
MDBCol,
} from "mdbreact";
import "./index.css";
class ModalPage extends Component {
state = {
modal2: false,
};
toggle = (nr) => () => {
let modalNumber = "modal" + nr;
this.setState({
[modalNumber]: !this.state[modalNumber],
});
};
render() {
return (
<MDBContainer>
<MDBBtn rounded onClick={this.toggle(3)}>
Launch MDBModal Register Form
</MDBBtn>
<MDBModal
className="form-dark"
contentClassName="card card-image"
isOpen={this.state.modal3}
toggle={this.toggle(3)}
>
<div className="text-white rgba-stylish-strong py-5 px-5 z-depth-4">
<MDBModalHeader
className="text-center"
titleClass="w-100 font-weight-bold white-text"
toggle={this.toggle(3)}
>
SIGN<span className="green-text"> UP</span>
</MDBModalHeader>
<MDBModalBody>
<form className="mx-3 grey-text">
<MDBInput label="Your email" group type="email" validate />
<MDBInput
label="Your password"
group
type="password"
validate
/>
<input
className="form-check-input"
type="checkbox"
id="modalFormDarkCheckbox"
></input>
<label
htmlFor="modalFormDarkCheckbox"
className="white-text form-check-label"
>
Accept the
<span className="green-text font-weight-bold">
Terms and Conditions
</span>
</label>
</form>
</MDBModalBody>
<MDBModalFooter className="justify-content-center">
<MDBCol md="12" className="mb-3">
<MDBBtn block rounded color="success" onClick={this.toggle(3)}>
SIGN UP
</MDBBtn>
</MDBCol>
<MDBCol md="12" className="mb-3 text-right font-small">
Have an account?
<span className="green-text ml-1 font-weight-bold">Log in</span>
</MDBCol>
</MDBModalFooter>
</div>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
/* Dark modal register */
.form-dark .modal-content{
background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(7).webp');
}
.form-dark .modal-header {
border-bottom: none;
}
.form-dark .modal-header .close {
color: #fff;
}
.form-dark .modal-footer{
border-top: none;
flex-direction: column;
}
.form-dark input[type=email]:focus:not([readonly]) {
border-bottom: 1px solid #00C851;
-webkit-box-shadow: 0 1px 0 0 #00C851;
box-shadow: 0 1px 0 0 #00C851;
}
.form-dark input[type=email]:focus:not([readonly]) + label {
color: #fff;
}
.form-dark .font-small {
font-size: 0.8rem;
}