Modal backdrop is not working


Topic: Modal backdrop is not working

Venky asked 5 years ago

Expected behavior

The modal backdrop should allow user to click on the body of the component

Actual behavior

Not able to click on the body of the component except on the modal.

For example user clicked on the Recommended Questions button and opened a modal with backdrop=false, but when try to click on the button again it's not allowing to click on that button. Please check the below image for reference.

Resources (screenshots, code snippets etc.) enter image description here

Please let me know for any clarifications on the same.

Thanks :)


Konrad Stępień staff answered 5 years ago

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.


dtremblay.grt premium commented 5 years ago

Unfortunately, this makes the modal pop under the content of the website. Not a solution.

When backdrop is false, we shouldn't have to manage its removal so users can click outside of the modal. It should automatically be handled by MDB's css without us worrying about it. That's why we pay for it.


Piotr Glejzer staff commented 5 years ago

I already fixed this with another solution but It will be available in the next release (17th of February ).


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.19.2
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: No