Rate these docs

React Bootstrap Modal / Popup

React Modal - Bootstrap 4 & Material Design

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 = {
            modal6: false,
            modal7: 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 = {
            modal6: false,
            modal7: 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.


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" ... />
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" ... />
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" ... />
isOpen boolean false If true, the modal is open <Modal isOpen={this.state.modal} ... />
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" ... />
position string Changes the position of the modal <Modal position="top-right" ... />
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} ... />

ModalBody PropTypes

Name Type Default Description Example
className string Adds custom class to ModalBody component. <ModalBody className="myClass" ... />

ModalFooter PropTypes

Name Type Default Description Example
className string Adds custom class to ModalFooter component. <ModalFooter className="myClass" ... />

ModalHeader PropTypes

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" ... />
titleClasses string Adds custom class to title element. <ModalHeader titleClasses="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


              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).jpg" 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


      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).jpg"
                            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).jpg"
                            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).jpg"
                            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 === 3 ? '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


              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.jpg" 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).jpg');
              }

              .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;
              }