Using Modals

Author: Dawid Adach

-

In this lesson, we will learn how to use modals in our projects. 

Note info: Modals are small popup windows that are really handy when you want to display to the user extra content, configuration informationor consent requests.

1. Import

Make sure that you have imported the following components from the mdbreact library:


            import {
                ...
                  MDBModal,
                  MDBModalBody,
                  MDBModalHeader,
                  MDBModalFooter
                ...
                } from "mdbreact";                
      

2. Add a new variable to state{}


            this.state = {
                modal: false,
                ...              
    

3. Add a new function to toggle (show/hide) the modal:


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

4. Add a call to the toggleModal() function onClick on the "Add Event" button


            <MDBBtn color="info" rounded onClick={this.toggleModal}>
                Add Event
            </MDBBtn>                  
    

5. Add a modal body at the bottom of the App component's render() function:


            render() {
                return (
                  <React.Fragment>
                    <MDBContainer>
                    ...
                    </MDBContainer>
             
                    {/* Modal code below: */}
                    <MDBModal isOpen={this.state.modal} toggle={this.toggleModal}>
                      <MDBModalHeader
                        className="text-center"
                        titleClass="w-100 font-weight-bold"
                        toggle={this.toggleModal}
                      >
                        Add new event
                      </MDBModalHeader>
                      <MDBModalBody>Body</MDBModalBody>
                      <MDBModalFooter className="justify-content-center">
                      </MDBModalFooter>
                    </MDBModal>
                  </React.Fragment>
                );
            
    

6. Save the file and run the app: 

Toggle modal preview

As you can see we can close the modal either by clicking on the X sign in the top right corner or simply clicking anywhere outside the modal.

Note:
Modals are great tools and they can be customized in a various way. Most probably you will use them to get user consent for using cookies / accept privacy policy on the website, display a registration/login form or to display some extra details like map and/or contact form.

You can find dozens of predefined modal templates in our docs.
You can also check our modal generator


Rate this lesson

Previous lesson Download Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...