Topic: mdbmodal backdrop is not working...

innovative23 pro asked 3 years ago is not working as expected using code.

We would like to know how your component got id ( id="removeBackdropModal" ) which is not given in sample....

<div class="modal fade show modal-scrolling" id="removeBackdropModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" data-backdrop="false" style="padding-right: 17px; display: block;">

Seems like the Sample given are not true React Code.

Anna Morawska staff answered 3 years ago


you are right, It's already fixed, It will be available in the upcoming version. Thank you for reporting, we appreciate this.



innovative23 pro commented 3 years ago

Thank you. Any approx date for next release?

Anna Morawska staff commented 3 years ago

This Monday, February 4th

Anna Morawska staff answered 3 years ago

Hi there,

you can find valid React code snippets bellow live every example. Please try this code:

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 (
        <MDBBtn onClick={this.toggle(12)}>Modal</MDBBtn>
        <MDBModal side isOpen={this.state.modal12} position="top-right" animation="top" toggle={this.toggle(12)} backdrop={false}>
          <MDBModalHeader toggle={this.toggle(12)}>MDBModal title</MDBModalHeader>
          <MDBBtn color="primary" outline onClick={this.toggle(12)}>Close</MDBBtn>
          <MDBBtn color="primary">Save changes</MDBBtn>
    );   } }

export default ModalPage;

innovative23 pro commented 3 years ago

Your code is not working as expected. When I click outside area of modal, the modal closes. Which should not happen when we use backdrop={false}

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.8.4
  • Device: Laptop
  • Browser: Chrome/Firefox
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes