Rate this 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 from 'react';
          import { Container, Button, Modal, ModalBody, ModalHeader, ModalFooter } from 'mdbreact';


          class ModalPage extends React.Component {
            constructor(props) {
              super(props);
              this.state = {
                modal: false
              };
            }

            toggle = () => {
              this.setState({
                modal: !this.state.modal
              });
            }

            render() {
              return (
                <Container>
                  <Button onClick={this.toggle}>Modal</Button>
                  <Modal isOpen={this.state.modal} toggle={this.toggle}>
                    <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
                    <ModalBody>
                      (...)
                    </ModalBody>
                    <ModalFooter>
                      <Button color="secondary" onClick={this.toggle}>Close</Button>{' '}
                      <Button color="primary">Save changes</Button>
                    </ModalFooter>
                  </Modal>
                </Container>
              );
            }
          }

          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 from 'react';
          import { Container, Button, Modal, ModalBody, ModalHeader, ModalFooter } from 'mdbreact';


          class ModalPage extends React.Component {
            constructor(props) {
              super(props);
              this.state = {
                modal2: false,
                modal3: false,
                modal4: false,
                modal5: false
              };
            }

            toggle(nr) {
              let modalNumber = 'modal' + nr
              this.setState({
                [modalNumber]: !this.state[modalNumber]
              });
            }

            render() {
              return (
                <Container>
                  <Button color="primary" onClick={() => this.toggle(2)} >Medium modal</Button>
                  <Modal isOpen={this.state.modal2} toggle={() => this.toggle(2)}>
                    <ModalHeader toggle={() => this.toggle(2)}>Modal title</ModalHeader>
                    <ModalBody>
                      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.
                    </ModalBody>
                    <ModalFooter>
                      <Button color="secondary" onClick={() => this.toggle(2)}>Close</Button>
                      <Button color="primary">Save changes</Button>
                    </ModalFooter>
                  </Modal>
                  <Button color="primary" onClick={() => this.toggle(3)} >Small modal</Button>
                  <Modal isOpen={this.state.modal3} toggle={() => this.toggle(3)} size="sm">
                    <ModalHeader toggle={() => this.toggle(3)}>Modal title</ModalHeader>
                    <ModalBody>
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </ModalBody>
                    <ModalFooter>
                      <Button color="secondary" size="sm" onClick={() => this.toggle(3)}>Close</Button>
                      <Button color="primary" size="sm">Save changes</Button>
                    </ModalFooter>
                  </Modal>
                  <Button color="primary" onClick={() => this.toggle(4)} >Large modal</Button>
                  <Modal isOpen={this.state.modal4} toggle={() => this.toggle(4)} size="lg">
                    <ModalHeader toggle={() => this.toggle(4)}>Modal title</ModalHeader>
                    <ModalBody>
                      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.
                    </ModalBody>
                    <ModalFooter>
                      <Button color="secondary" onClick={() => this.toggle(4)}>Close</Button>
                      <Button color="primary">Save changes</Button>
                    </ModalFooter>
                  </Modal>
                  <Button color="primary" onClick={() => this.toggle(5)}>Fluid modal</Button>
                  <Modal isOpen={this.state.modal5} toggle={() => this.toggle(5)} size="fluid">
                    <ModalHeader toggle={() => this.toggle(5)}>Modal title</ModalHeader>
                    <ModalBody>
                      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.
                    </ModalBody>
                    <ModalFooter>
                      <Button color="secondary" onClick={() => this.toggle(5)}>Close</Button>
                      <Button color="primary">Save changes</Button>
                    </ModalFooter>
                  </Modal>
                </Container>
              );
            }
          }

          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 from 'react';
          import { Container, Button, Modal, ModalBody, ModalHeader, ModalFooter } from 'mdbreact';


          class ModalPage extends React.Component {
            constructor(props) {
              super(props);
              this.state = {
                modal6: false,
                modal7: false

              };
            }

            toggle(nr) {
              let modalNumber = 'modal' + nr
              this.setState({
                [modalNumber]: !this.state[modalNumber]
              });
            }

            render() {
              return (
                <Container>
                  <Button color="secondary" onClick={() => this.toggle(6)}>Top right</Button>
                  <Modal isOpen={this.state.modal6} toggle={() => this.toggle(6)} side position="top-right">
                    <ModalHeader toggle={() => this.toggle(6)}>Modal title</ModalHeader>
                    <ModalBody>
                      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.
                    </ModalBody>
                    <ModalFooter>
                      <Button color="secondary" onClick={() => this.toggle(6)}>Close</Button>
                      <Button color="primary">Save changes</Button>
                    </ModalFooter>
                  </Modal>
                  <Button color="secondary" onClick={() => this.toggle(7)}>Bottom left</Button>
                  <Modal isOpen={this.state.modal7} toggle={() => this.toggle(7)} side position="bottom-left">
                    <ModalHeader toggle={() => this.toggle(7)}>Modal title</ModalHeader>
                    <ModalBody>
                      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.
                    </ModalBody>
                    <ModalFooter>
                      <Button color="secondary" onClick={() => this.toggle(7)}>Close</Button>
                      <Button color="primary">Save changes</Button>
                    </ModalFooter>
                  </Modal>
                </Container>
              );
            }
          }

          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 from 'react';
          import { Container, Button, Modal, ModalBody, ModalHeader, ModalFooter } from 'mdbreact';


          class ModalPage extends React.Component {
            constructor(props) {
              super(props);
              this.state = {
                modal6: false,
                modal7: false

              };
            }

            toggle(nr) {
              let modalNumber = 'modal' + nr
              this.setState({
                [modalNumber]: !this.state[modalNumber]
              });
            }

            render() {
              return (
                <Container>
                  <Button color="info" onClick={() => this.toggle(8)}>Right</Button>
                  {/*  */}
                  <Modal isOpen={this.state.modal8} toggle={() => this.toggle(8)} fullHeight position="right">
                    <ModalHeader toggle={() => this.toggle(8)}>Modal title</ModalHeader>
                    <ModalBody>
                      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.
                    </ModalBody>
                    <ModalFooter>
                      <Button color="secondary" onClick={() => this.toggle(8)}>Close</Button>
                      <Button color="primary">Save changes</Button>
                    </ModalFooter>
                  </Modal>
                  <Button color="info" onClick={() => this.toggle(9)}>Bottom</Button>
                  <Modal isOpen={this.state.modal9} toggle={() => this.toggle(9)} fullHeight position="bottom">
                    <ModalHeader toggle={() => this.toggle(9)}>Modal title</ModalHeader>
                    <ModalBody>
                      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.
                    </ModalBody>
                    <ModalFooter>
                      <Button color="secondary" onClick={() => this.toggle(9)}>Close</Button>
                      <Button color="primary">Save changes</Button>
                    </ModalFooter>
                  </Modal>
                </Container>
              );
            }
          }

          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 from 'react';
          import { Container, Button, Modal, ModalBody } from 'mdbreact';


          class ModalPage extends React.Component {
            constructor(props) {
              super(props);
              this.state = {
                modal6: false,
                modal7: false

              };
            }

            toggle(nr) {
              let modalNumber = 'modal' + nr
              this.setState({
                [modalNumber]: !this.state[modalNumber]
              });
            }

            render() {
              return (
                <Container>
                  <Button color="warning" onClick={() => this.toggle(10)}>Bottom</Button>
                  <Modal isOpen={this.state.modal10} toggle={() => this.toggle(10)} frame position="bottom">
                    <ModalBody className="text-center">
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                      <Button color="secondary" onClick={() => this.toggle(10)}>Close</Button>
                      <Button color="primary">Save changes</Button>
                    </ModalBody>
                  </Modal>
                  <Button color="warning" onClick={() => this.toggle(11)}>Top</Button>
                  <Modal isOpen={this.state.modal11} toggle={() => this.toggle(11)} frame position="top">
                    <ModalBody className="text-center">
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                      <Button color="secondary" onClick={() => this.toggle(11)}>Close</Button>
                      <Button color="primary">Save changes</Button>
                    </ModalBody>
                  </Modal>
                </Container>
              );
            }
          }

          export default ModalPage;

      

Remove backdrop

To remove backdrop add backdrop={false} prop to the modal markup



          import React from 'react';
import { Container, Button, Modal, ModalBody, ModalHeader, ModalFooter } from 'mdbreact';


class ModalPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal12: false
    };
  }

  toggle(nr) {
    let modalNumber = 'modal' + nr
    this.setState({
      [modalNumber]: !this.state[modalNumber]
    });
  }

  render() {
    return (
      <Container>
        <Button onClick={() => this.toggle(12)}>Modal</Button>
        <Modal isOpen={this.state.modal12} toggle={() => this.toggle(12)} backdrop={false}>
          <ModalHeader toggle={() => this.toggle(12)}>Modal title</ModalHeader>
          <ModalBody>
            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.
          </ModalBody>
          <ModalFooter>
            <Button color="secondary" onClick={() => this.toggle(12)}>Close</Button>
            <Button color="primary">Save changes</Button>
          </ModalFooter>
        </Modal>
      </Container>
    );
  }
}

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 from 'react';
          import { Container, Button, Modal, ModalBody, ModalHeader, ModalFooter } from 'mdbreact';


          class ModalPage extends React.Component {
            constructor(props) {
              super(props);
              this.state = {
                modal14: false
              };
            }

            toggle(nr) {
              let modalNumber = 'modal' + nr
              this.setState({
                [modalNumber]: !this.state[modalNumber]
              });
            }

            render() {
              return (
                <Container>
                  <Button color="primary" onClick={() => this.toggle(14)} >Modal</Button>
                  <Modal isOpen={this.state.modal14} toggle={() => this.toggle(14)} centered>
                    <ModalHeader toggle={() => this.toggle(14)}>Modal title</ModalHeader>
                    <ModalBody>
                      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.
                    </ModalBody>
                    <ModalFooter>
                      <Button color="secondary" onClick={() => this.toggle(14)}>Close</Button>
                      <Button color="primary">Save changes</Button>
                    </ModalFooter>
                  </Modal>
                </Container>
              );
            }
          }

          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 from 'react';
import { Container, Button, Modal, ModalBody, ModalHeader, ModalFooter, Popover, PopoverBody, PopoverHeader, Tooltip } from 'mdbreact';


class ModalPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal15: false
    };
  }

  toggle(nr) {
    let modalNumber = 'modal' + nr
    this.setState({
      [modalNumber]: !this.state[modalNumber]
    });
  }

  render() {
    return (
      <Container>
        <Button color="primary" onClick={() => this.toggle(15)} >Modal</Button>
        <Modal isOpen={this.state.modal15} toggle={() => this.toggle(15)}>
          <ModalHeader toggle={() => this.toggle(15)}>Modal title</ModalHeader>
          <ModalBody>
            This
            <Popover
              component="button"
              placement="right"
              popoverBody="button"
              tag="span"
              className="btn btn-secondary">
              <PopoverHeader>Popover title</PopoverHeader>
              <PopoverBody>Popover body content is set in this attribute.</PopoverBody>
            </Popover>
            triggers a popover on click.
            <hr />
            <Tooltip
              placement="top"
              tag="a"
              component="span"
              tooltipContent="Tooltip">
                This link
            </Tooltip>
            {' '}and{' '}
            <Tooltip
              placement="top"
              tag="a"
              component="span"
              tooltipContent="Tooltip">
                that link
            </Tooltip>
            {' '}have tooltips on hover.
          </ModalBody>
          <ModalFooter>
            <Button color="secondary" onClick={() => this.toggle(15)}>Close</Button>
            <Button color="primary">Save changes</Button>
          </ModalFooter>
        </Modal>
      </Container>
    );
  }
}

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 from 'react';
          import { Container, Button, Modal, ModalBody, ModalHeader, ModalFooter, Col, Row } from 'mdbreact';


          class ModalPage extends React.Component {
            constructor(props) {
              super(props);
              this.state = {
                modal16: false
              };
            }

            toggle(nr) {
              let modalNumber = 'modal' + nr
              this.setState({
                [modalNumber]: !this.state[modalNumber]
              });
            }

            render() {
              return (
                <Container>
                  <Button onClick={() => this.toggle(16)}>Modal</Button>
                  <Modal isOpen={this.state.modal16} toggle={() => this.toggle(16)}>
                    <ModalHeader toggle={() => this.toggle(16)}>Modal title</ModalHeader>
                    <ModalBody>
                      <Container fluid className="text-white">
                        <Row>
                          <Col md="4" className="bg-info">.col-md-4</Col>
                          <Col md="4" className="ml-auto bg-info">.col-md-4 .ml-auto</Col>
                        </Row>
                        <br />
                        <Row>
                          <Col md="3" className="ml-auto bg-info">.col-md-3 .ml-auto</Col>
                          <Col md="2" className="ml-auto bg-info">.col-md-2 .ml-auto</Col>
                        </Row>
                        <Row>
                          <Col md="6" className="ml-5 bg-info">.col-md-6 .ml-5</Col>
                        </Row>
                        <br />
                        <Row>
                          <Col sm="9" className="bg-info">
                            Level 1: .col-sm-9
                            <Row>
                              <Col sm="6" className="bg-info">
                                Level 2: .col-8 .col-sm-6
                              </Col>
                              <Col sm="6" className="bg-info">
                                Level 2: .col-4 .col-sm-6
                              </Col>
                            </Row>
                          </Col>
                        </Row>
                      </Container>
                    </ModalBody>
                    <ModalFooter>
                      <Button color="secondary" onClick={() => this.toggle(16)}>Close</Button>{' '}
                      <Button color="primary">Save changes</Button>
                    </ModalFooter>
                  </Modal>
                </Container>
              );
            }
          }

          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



          <Button onClick={() => this.toggle(1)}>Launch Modal</Button>
          <Modal position="top" backdrop={false} frame isOpen={this.state.modal1} toggle={() => this.toggle(1)} >
            <ModalBody>
              <Row className="justify-content-center align-items-center">
                <p className="pt-3 pr-2">We use cookies to improve your website experience</p>
                <Button color="primary"  onClick={() => this.toggle(1)}>Learn more<Fa icon="book" className="ml-1" /></Button>
                <Button color="primary" outline onClick={() => this.toggle(1)}>Ok, thanks</Button>
              </Row>
            </ModalBody>
          </Modal>
      

Modal Coupon



          <Button onClick={() => this.toggle(2)}>Launch Modal</Button>
          <Modal position="bottom" backdrop={false} frame isOpen={this.state.modal2} toggle={() => this.toggle(2)} >
            <ModalBody>
              <Row className="justify-content-center align-items-center">
                <h3><Badge color="success">v52gs1</Badge></h3>
                <p className="pt-3 mx-4">We have a gift for you! Use this code to get a <strong>10% discount</strong>.</p>
                <Button color="success"  onClick={() => this.toggle(2)}>Learn more<Fa icon="book" className="ml-1" /></Button>
                <Button color="success" outline onClick={() => this.toggle(2)}>No, thanks</Button>
              </Row>
            </ModalBody>
          </Modal>

      

Modal Discount



              <Button onClick={() => this.toggle(3)}>Launch Modal</Button>
              <Modal size="lg" className="modal-notify modal-danger text-white" side position="bottom-right" backdrop={false}  isOpen={this.state.modal3} toggle={() => this.toggle(3)} >
                <ModalHeader tag="p" toggle={() => this.toggle(3)}>
                  Discount offer: <strong>10% off</strong>
                </ModalHeader>
                <ModalBody>
                  <Row>
                    <Col size="3" className="d-flex justify-content-center align-items-center">
                      <Fa size="4x" icon="gift" className="ml-1" />
                    </Col>
                    <Col 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><Badge color="danger">v52gs1</Badge></h3>
                    </Col>
                  </Row>
                </ModalBody>
                <ModalFooter className="justify-content-center">
                  <Button color="danger"  onClick={() => this.toggle(3)}>Get it now<Fa icon="diamond" className="ml-1 white-text" /></Button>
                  <Button color="danger" outline onClick={() => this.toggle(3)}>No, thanks</Button>
                </ModalFooter>
              </Modal>

          

Modal Related Content



              <Button onClick={() => this.toggle(4)}>Launch Modal</Button>
              <Modal className="modal-notify modal-info text-white" side position="bottom-right" backdrop={false}  isOpen={this.state.modal4} toggle={() => this.toggle(4)} >
                <ModalHeader tag="p" toggle={() => this.toggle(4)}>
                  Related article
                </ModalHeader>
                <ModalBody>
                  <Row>
                    <Col size="5">
                      <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(55).jpg" className="img-fluid" alt="" />
                    </Col>
                    <Col size="7">
                      <p><strong>My travel to paradise</strong></p>
                      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
                      <Button color="primary" size='md' outline onClick={() => this.toggle(4)}>Read more</Button>
                    </Col>
                  </Row>
                </ModalBody>
              </Modal>

          

Modal Abandoned Cart




            <Button onClick={() => this.toggle(5)}>Launch Modal</Button>
            <Modal className="modal-notify modal-info text-white" side position="top-right" backdrop={false}  isOpen={this.state.modal5} toggle={() => this.toggle(5)} >
              <ModalHeader tag="p" toggle={() => this.toggle(5)}>
                Product in the cart
              </ModalHeader>
              <ModalBody>
                <Row>
                  <Col size="3" className="d-flex justify-content-center align-items-center">
                    <Fa size="4x" icon="shopping-cart" className="ml-1" />
                  </Col>
                  <Col 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>
                  </Col>
                </Row>
              </ModalBody>
              <ModalFooter className="justify-content-center">
                <Button color="primary"  onClick={() => this.toggle(5)}>Go to cart</Button>
                <Button color="primary" outline onClick={() => this.toggle(5)}>Cancel</Button>
              </ModalFooter>
            </Modal>

        

Modal Confirm Delete


              <Button onClick={() => this.toggle(6)}>Launch Modal</Button>
              <Modal modalStyle="danger" className="text-white" size="sm" side position="top-right" backdrop={false}  isOpen={this.state.modal6} toggle={() => this.toggle(6)} >
                <ModalHeader className="text-center" titleClass="w-100" tag="p" toggle={() => this.toggle(6)}>
                  Are you sure?
                </ModalHeader>
                <ModalBody className="text-center">
                  <Fa icon="times" size="4x" className="animated rotateIn" />
                </ModalBody>
                <ModalFooter className="justify-content-center">
                  <Button color="danger"  onClick={() => this.toggle(6)}>Yes</Button>
                  <Button color="danger" outline onClick={() => this.toggle(6)}>No</Button>
                </ModalFooter>
              </Modal>
          

Modal Poll


            <Button onClick={() => this.toggle(9)}>Launch Modal</Button>
            <Modal fullHeight position="right" backdrop={false} className="modal-notify modal-info text-white" isOpen={this.state.modal9} toggle={() => this.toggle(9)} >
              <ModalHeader tag="p" toggle={() => this.toggle(9)}>
                Feedback request
              </ModalHeader>
              <ModalBody className="text-center">
                <Fa icon="file-text-o" 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 />
                {/* Radio */}
                <p className="mb-3">Your rating</p>
                <div className="text-left">
                  <Input label="Very good" type="radio" id="radio1" />
                  <Input label="Good" type="radio" id="radio2" />
                  <Input label="Mediocre" type="radio" id="radio3" />
                  <Input label="Bad" type="radio" id="radio4" />
                  <Input label="Very bad" type="radio" id="radio5" />
                </div>
                {/* Textarea */}
                <p className="mb-3">What could we improve?</p>
                <Input label="Your message" type="textarea" id="radio1" />
              </ModalBody>
              <ModalFooter className="justify-content-center">
                <Button color="primary" onClick={() => this.toggle(9)}>Send<Fa icon="paper-plane" className="ml-1" /></Button>
                <Button color="primary" outline onClick={() => this.toggle(9)}>Calcel</Button>
              </ModalFooter>
            </Modal>
        

Modal Cart


              <Button onClick={() => this.toggle(10)}>Launch Modal</Button>
          <Modal isOpen={this.state.modal10} toggle={() => this.toggle(10)} >
            <ModalHeader toggle={() => this.toggle(10)}>
              Your cart
            </ModalHeader>
            <ModalBody>
              <Table striped>
                <TableHead>
                  <tr>
                    <th></th>
                    <th>Product name</th>
                    <th>Price</th>
                    <th>Remove</th>
                  </tr>
                </TableHead>
                <TableBody>
                  <tr>
                    <td>1</td>
                    <td>Product 1</td>
                    <td>100$</td>
                    <td><Fa icon="remove" /></td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>Product 2</td>
                    <td>1 340$</td>
                    <td><Fa icon="remove" /></td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td>Product 3</td>
                    <td>30$</td>
                    <td><Fa icon="remove" /></td>
                  </tr>
                  <tr>
                    <td></td>
                    <td><strong>Total</strong></td>
                    <td><strong>1 470$</strong></td>
                    <td></td>
                  </tr>
                </TableBody>
              </Table>
            </ModalBody>
            <ModalFooter className="justify-content-end">
              <Button color="primary" outline onClick={() => this.toggle(10)}>Close</Button>
              <Button color="primary" onClick={() => this.toggle(10)}>Checkout</Button>
            </ModalFooter>
          </Modal>
          

Modal Push


              <Button onClick={() => this.toggle(7)}>Launch Modal</Button>
              <Modal className="modal-notify modal-info text-white" isOpen={this.state.modal7} toggle={() => this.toggle(7)} >
                <ModalHeader className="text-center" titleClass="w-100" tag="p">
                  Be always up to date
                </ModalHeader>
                <ModalBody className="text-center">
                  <Fa icon="bell" size="4x" className="animated rotateIn mb-4" />
                  <p>Do you want to receive the push notification about the newest posts?</p>
                </ModalBody>
                <ModalFooter className="justify-content-center">
                  <Button color="primary"  onClick={() => this.toggle(7)}>Yes</Button>
                  <Button color="primary" outline onClick={() => this.toggle(7)}>No</Button>
                </ModalFooter>
              </Modal>
          

Modal YouTube


              <Button onClick={() => this.toggle(11)}>Launch Modal</Button>
          <Modal size="lg" isOpen={this.state.modal11} toggle={() => this.toggle(11)} >
            <ModalBody className="mb-0 p-0">
              <div className="embed-responsive embed-responsive-16by9 z-depth-1-half">
                  <iframe className="embed-responsive-item" src="https://www.youtube.com/embed/A3PDXmYoF5U" allowFullScreen></iframe>
              </div>
            </ModalBody>
            <ModalFooter className="justify-content-center">
              <span className="mr-4">Spread the word!</span>
              <Button tag="a" size="sm" floating social="fb"><Fa icon="facebook" /></Button>
              <Button tag="a" size="sm" floating social="tw"><Fa icon="twitter" /></Button>
              <Button tag="a" size="sm" floating social="gplus"><Fa icon="google-plus" /></Button>
              <Button tag="a" size="sm" floating social="li"><Fa icon="linkedin" /></Button>
              <Button color="primary" outline rounded size="md" className="ml-4" onClick={() => this.toggle(11)}>Close</Button>
            </ModalFooter>
          </Modal>
          

Modal Vimeo


              <Button onClick={() => this.toggle(12)}>Launch Modal</Button>
          <Modal size="lg" isOpen={this.state.modal12} toggle={() => this.toggle(12)} >
            <ModalBody className="mb-0 p-0">
              <div className="embed-responsive embed-responsive-16by9 z-depth-1-half">
                <iframe className="embed-responsive-item" src="https://player.vimeo.com/video/115098447" allowFullScreen></iframe>
              </div>
            </ModalBody>
            <ModalFooter className="justify-content-center">
              <span className="mr-4">Spread the word!</span>
              <Button tag="a" size="sm" floating social="fb"><Fa icon="facebook" /></Button>
              <Button tag="a" size="sm" floating social="tw"><Fa icon="twitter" /></Button>
              <Button tag="a" size="sm" floating social="gplus"><Fa icon="google-plus" /></Button>
              <Button tag="a" size="sm" floating social="li"><Fa icon="linkedin" /></Button>
              <Button color="primary" outline rounded size="md" className="ml-4" onClick={() => this.toggle(12)}>Close</Button>
            </ModalFooter>
          </Modal>
          

Modal Product


              <Button onClick={() => this.toggle(13)}>Launch Modal</Button>
              <Modal size="lg" isOpen={this.state.modal13} toggle={() => this.toggle(13)} >
                <ModalBody className="d-flex">
                  <Col size="5" lg="5">
                  {/* Carrousel */}
                    <Carousel
                      activeItem={1}
                      length={3}
                      showControls={true}
                      showIndicators={true}
                      thumbnails
                      className="z-depth-1">
                      <CarouselInner>
                        <CarouselItem 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" />
                        </CarouselItem>
                        <CarouselItem 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" />
                        </CarouselItem>
                        <CarouselItem 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" />
                        </CarouselItem>
                      </CarouselInner>
                    </Carousel>
                  </Col>
                  <Col 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>
                    {/* Accordion wrapper */}
                    <div className="my-4">
                      <Card>
                        <CollapseHeader onClick={this.onClick(1)}>Description
                        <i className={"ml-1 " + (accordion === 1 ? 'fa fa-angle-down rotate-icon' : 'fa fa-angle-down')}></i>
                        </CollapseHeader>
                        <Collapse isOpen={accordion === 1}>
                          <CardBody>
                            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.
                          </CardBody>
                        </Collapse>
                      </Card>
                      <Card>
                        <CollapseHeader onClick={this.onClick(2)}>Details
                          <i className={"ml-1 " + (accordion === 2 ? 'fa fa-angle-down rotate-icon' : 'fa fa-angle-down')}></i>
                        </CollapseHeader>
                        <Collapse isOpen={accordion === 2}>
                          <CardBody>
                            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.
                          </CardBody>
                        </Collapse>
                      </Card>
                      <Card>
                        <CollapseHeader onClick={this.onClick(3)}>Shipping
                        <i className={"ml-1 " + (accordion === 3 ? 'fa fa-angle-down rotate-icon' : 'fa fa-angle-down')}></i>
                        </CollapseHeader>
                        <Collapse isOpen={accordion === 3}>
                          <CardBody>
                            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.
                          </CardBody>
                        </Collapse>
                      </Card>
                    </div>
                    <Row>
                      <Col size="6">
                        <Select>
                          <SelectInput></SelectInput>
                          <SelectOptions>
                            <SelectOption disabled>Choose your option</SelectOption>
                            <SelectOption>White</SelectOption>
                            <SelectOption>Black</SelectOption>
                            <SelectOption>Pink</SelectOption>
                          </SelectOptions>
                        </Select>
                        <label>Select color</label>
                      </Col>
                      <Col size="6">
                        <Select>
                          <SelectInput></SelectInput>
                          <SelectOptions>
                            <SelectOption disabled>Choose your option</SelectOption>
                            <SelectOption>White</SelectOption>
                            <SelectOption>Black</SelectOption>
                            <SelectOption>Pink</SelectOption>
                          </SelectOptions>
                        </Select>
                        <label>Select size</label>
                      </Col>
                    </Row>
                    <Row className="justify-content-center">
                      <Button color="secondary" className="ml-4" onClick={() => this.toggle(13)}>Close</Button>
                      <Button color="primary" className="ml-4" onClick={() => this.toggle(13)}>Add to Cart<Fa icon="cart-plus" className="ml-2" /></Button>
                    </Row>
                  </Col>
                </ModalBody>
              </Modal>
          

Modal Social Share


              <Button onClick={() => this.toggle(8)}>Launch Modal</Button>
              <Modal cascading isOpen={this.state.modal8} toggle={() => this.toggle(8)} >
                <ModalHeader className="text-center text-white light-blue darken-3" titleClass="w-100" tag="h5" toggle={() => this.toggle(8)}>
                 <Fa icon="users" className="text-white mr-2" />
                  Spreed the word!
                </ModalHeader>
                <ModalBody className="text-center">
                  <Button tag="a" floating social="fb"><Fa icon="facebook" /></Button>
                  <Button tag="a" floating social="tw"><Fa icon="twitter" /></Button>
                  <Button tag="a" floating social="gplus"><Fa icon="google-plus" /></Button>
                  <Button tag="a" floating social="li"><Fa icon="linkedin" /></Button>
                  <Button tag="a" floating social="ins"><Fa icon="instagram" /></Button>
                  <Button tag="a" floating social="pin"><Fa icon="pinterest" /></Button>
                  <Button tag="a" floating social="yt"><Fa icon="youtube" /></Button>
                  <Button tag="a" floating social="dribble"><Fa icon="dribbble" /></Button>
                  <Button tag="a" floating social="vk"><Fa icon="vk" /></Button>
                  <Button tag="a" floating social="so"><Fa icon="stack-overflow" /></Button>
                  <Button tag="a" floating social="slack"><Fa icon="slack" /></Button>
                  <Button tag="a" floating social="git"><Fa icon="github" /></Button>
                  <Button tag="a" floating social="comm"><Fa icon="comments" /></Button>
                  <Button tag="a" floating social="email"><Fa icon="envelope" /></Button>
                </ModalBody>
              </Modal>
          

Simple Modal Login


          <Button rounded onClick={() => this.toggle(1)}>Launch Modal Login Form</Button>
          <Modal isOpen={this.state.modal1} toggle={() => this.toggle(1)} >
            <ModalHeader className="text-center" titleClass="w-100 font-weight-bold" toggle={() => this.toggle(1)}>Sign in</ModalHeader>
            <ModalBody>
              <form className="mx-3 grey-text">
                  <Input label="Type your email" icon="envelope" group type="email" validate error="wrong" success="right"/>
                  <Input label="Type your password" icon="lock" group type="password" validate/>
              </form>
            </ModalBody>
            <ModalFooter className="justify-content-center">
              <Button onClick={() => this.toggle(1)}>Login</Button>
            </ModalFooter>
          </Modal>
        

Simple Modal Register


              <Button rounded onClick={() => this.toggle(2)}>Launch Modal Register Form</Button>
              <Modal isOpen={this.state.modal2} toggle={() => this.toggle(2)} >
                <ModalHeader className="text-center" titleClass="w-100 font-weight-bold" toggle={() => this.toggle(2)}>Sign in</ModalHeader>
                <ModalBody>
                  <form className="mx-3 grey-text">
                    <Input label="Your name" icon="user" group type="text" validate error="wrong" success="right"/>
                    <Input label="Your email" icon="envelope" group type="email" validate error="wrong" success="right"/>
                    <Input label="Your password" icon="lock" group type="password" validate/>
                  </form>
                </ModalBody>
                <ModalFooter className="justify-content-center">
                  <Button color="deep-orange" onClick={() => this.toggle(2)}>SIGN UP</Button>
                </ModalFooter>
              </Modal>
          

Simple Modal Subscription


            <Button rounded onClick={() => this.toggle(3)}>Launch Modal subscription Form</Button>
          <Modal isOpen={this.state.modal3} toggle={() => this.toggle(3)} >
            <ModalHeader className="text-center" titleClass="w-100 font-weight-bold" toggle={() => this.toggle(3)}>Subscribe</ModalHeader>
            <ModalBody>
              <form className="mx-3 grey-text">
                <Input label="Your name" icon="user" group type="text" validate/>
                <Input label="Your email" icon="envelope" group type="email" validate error="wrong" success="right"/>
              </form>
            </ModalBody>
            <ModalFooter className="justify-content-center">
              <Button color="indigo" onClick={() => this.toggle(3)}>Send<Fa icon="paper-plane-o" className="ml-2" /></Button>
            </ModalFooter>
          </Modal>
          

Simple Modal Contact


              <Button rounded onClick={() => this.toggle(4)}>Launch Modal Contact Form</Button>
              <Modal isOpen={this.state.modal4} toggle={() => this.toggle(4)} >
                <ModalHeader className="text-center" titleClass="w-100 font-weight-bold" toggle={() => this.toggle(4)}>Write to us</ModalHeader>
                <ModalBody>
                  <form className="mx-3 grey-text">
                    <Input label="Your name" icon="user" group type="text" validate/>
                    <Input label="Your email" icon="envelope" group type="email" validate error="wrong" success="right"/>
                    <Input label="Your Subject" icon="tag" group type="text"/>
                    <Input type="textarea" rows="2" label="Your message" icon="pencil"/>
                  </form>
                </ModalBody>
                <ModalFooter className="justify-content-center">
                  <Button color="unique" onClick={() => this.toggle(4)}>Send<Fa icon="paper-plane-o" className="ml-2" /></Button>
                </ModalFooter>
              </Modal>
          

Cascading Modal Register / Login MDB Pro component


            <Button rounded onClick={() => this.toggle(1)}>Launch Modal Login/Register</Button>
          <Modal className="form-cascading" isOpen={this.state.modal1} toggle={() => this.toggle(1)} >
            <Nav tabs className="md-tabs nav-justified tabs-2 light-blue darken-3" style={{margin: "-1.5rem 1rem 0 1rem"}}>
              <NavItem>
                <NavLink className={this.state.activeItem == 1 ? "active" : ""} to="#" onClick={() => { this.toggleTab('1') }} >
                  <Fa icon="user" className="mr-1" />Login
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink className={this.state.activeItem == 2 ? "active" : ""} to="#" onClick={() => { this.toggleTab('2') }} >
                  <Fa icon="user-plus" className="mr-1" />Register
                </NavLink>
              </NavItem>
            </Nav>
            <TabContent activeItem={this.state.activeItem}>
              <TabPane tabId="1">
                <ModalBody className="mx-3">
                  <form className=" mx-3 grey-text">
                    <Input label="Your email" icon="envelope" group type="email" validate error="wrong" success="right"/>
                    <Input label="Your password" icon="lock" group type="password" validate/>
                  </form>
                </ModalBody>
                <ModalFooter className="justify-content-center mx-3">
                  <Button className="mb-4" color="info" onClick={() => this.toggle(3)}>LOG IN <Fa icon="sign-in" className="ml-1" /></Button>
                  <Row 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 class="blue-text ml-1" onClick={() => { this.toggleTab('2') }}>Sign Up</span></p>
                      <p className="font-small grey-text">Forgot <span class="blue-text ml-1">password?</span></p>
                    </div>
                    <Button outline color="info" onClick={() => this.toggle(1)}>CLOSE</Button>
                  </Row>
                </ModalFooter>
              </TabPane>
              <TabPane tabId="2">
                <ModalBody className="mx-3">
                  <form className=" mx-3 grey-text">
                    <Input label="Your email" icon="envelope" group type="email" validate error="wrong" success="right"/>
                    <Input label="Your password" icon="lock" group type="password" validate/>
                    <Input label="Repeat password" icon="lock" group type="password" validate/>
                  </form>
                </ModalBody>
                <ModalFooter className="justify-content-center mx-3">
                  <Button className="mb-4" color="info" onClick={() => this.toggle(3)}>SIGN UP<Fa icon="sign-in" className="ml-1" /></Button>
                  <Row 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 class="blue-text ml-1" onClick={() => { this.toggleTab('1') }}>Log in</span></p>
                    </div>
                    <Button outline color="info" onClick={() => this.toggle(1)}>CLOSE</Button>
                  </Row>
                </ModalFooter>
              </TabPane>
            </TabContent>
          </Modal>
        


/* 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


              <Button rounded onClick={() => this.toggle(5)}>Launch Modal Login With Avatar</Button>
              <Modal size="sm" cascading className="modal-avatar" isOpen={this.state.modal5} toggle={() => this.toggle(5)} >
                <ModalHeader className="mx-auto">
                  <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%281%29.jpg" alt="avatar" className="rounded-circle img-responsive" />
                </ModalHeader>
                <ModalBody className="text-center mb-1">
                  <h5 className="mt-1 mb-2">Maria Doe</h5>
                  <form className="mx-3 grey-text">
                    <Input label="Enter password" group type="password" validate/>
                  </form>
                </ModalBody>
                <ModalFooter className="justify-content-center" >
                  <Button color="cyan" onClick={() => this.toggle(5)}>Login<Fa icon="sign-in" className="ml-2" /></Button>
                </ModalFooter>
              </Modal>
          

Subscription Modal With Orange Header


              <Button rounded onClick={() => this.toggle(6)}>Launch Modal Subscription</Button>
              <Modal className="modal-notify modal-warning white-text" isOpen={this.state.modal6} toggle={() => this.toggle(6)} >
                <ModalHeader className="text-center" titleClass="w-100 font-weight-bold" toggle={() => this.toggle(6)}>Subscribe</ModalHeader>
                <ModalBody>
                  <form className="mx-3 grey-text">
                    <Input label="Your name" icon="user" iconClass="grey-text" group type="text" validate error="wrong" success="right"/>
                    <Input label="Your email" icon="envelope" iconClass="grey-text" group type="email" validate error="wrong" success="right"/>
                  </form>
                </ModalBody>
                <ModalFooter className="justify-content-center">
                  <Button color="warning" outline onClick={() => this.toggle(6)}>Send<Fa icon="paper-plane-o" className="ml-2" /></Button>
                </ModalFooter>
              </Modal>
          

Elegant Modal Login MDB Pro component


              <Button rounded onClick={() => this.toggle(2)}>Launch Modal Login Form</Button>
              <Modal className="form-elegant" isOpen={this.state.modal2} toggle={() => this.toggle(2)} >
                <ModalHeader className="text-center" titleClass="w-100 font-weight-bold my-3" toggle={() => this.toggle(2)}>Sign in</ModalHeader>
                <ModalBody className="mx-3">
                  <form className=" mx-3 grey-text">
                      <Input label="Your email" group type="email" validate />
                      <Input label="Your password" group type="password" validate/>
                      <p class="font-small blue-text text-right">Forgot password?</p>
                  </form>
                </ModalBody>
                <ModalFooter className="justify-content-center mx-4">
                    <Button block rounded gradient="blue" onClick={() => this.toggle(2)}>SIGN IN</Button>
                    <p className="font-small dark-grey-text my-4">or Sign in with:</p>
                    <Row className="py-3">
                      <Button rounded color="white" className="mr-md-3"><Fa icon="facebook" className="text-center blue-text" /></Button>
                      <Button rounded color="white" className="mr-md-3"><Fa icon="twitter" className="text-center blue-text" /></Button>
                      <Button rounded color="white" className="mr-md-3"><Fa icon="google-plus" className="text-center blue-text" /></Button>
                    </Row>
                    <Row 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 class="blue-text ml-1"> Sign Up</span></p>
                    </Row>
                </ModalFooter>
              </Modal>
          

              /* 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


            <Button rounded onClick={() => this.toggle(3)}>Launch Modal Register Form</Button>
            <Modal 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">
                <ModalHeader className="text-center" titleClass="w-100 font-weight-bold white-text" toggle={() => this.toggle(3)}>
                  SIGN<span className="green-text"> UP</span>
                </ModalHeader>
                <ModalBody>
                  <form className="mx-3 grey-text">
                      <Input label="Your email" group type="email" validate />
                      <Input 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>
                </ModalBody>
                <ModalFooter className="justify-content-center">
                  <Col md="12" className="mb-3">
                    <Button block rounded color="success" onClick={() => this.toggle(3)}>SIGN UP</Button>
                  </Col>
                  <Col md="12" className="mb-3 text-right font-small">
                    Have an account?
                    <span className="green-text ml-1 font-weight-bold">Log in</span>
                  </Col>
                </ModalFooter>
            </div>
          </Modal>
          

              /* 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;
              }