Hi @Venky,

The solution is simple. For my modal, I added wrapClassName property with my class backdropFix and for my css file I add this code:

.backdropFix { 
   z-index: -1 
}

And now I can click for example the button in background of the modal.

My code:

App.js

import React, { Component } from 'react';
import {
  MDBContainer,
  MDBBtn,
  MDBModal,
  MDBModalBody,
  MDBModalHeader,
  MDBModalFooter
} from 'mdbreact';

import './App.css'; //Import here your styles if you need

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}
          backdrop={false}
          wrapClassName={'backdropFix'}
        >
          <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;

App.css

.backdropFix { 
   z-index: -1 
}

Best regards, Konrad.