Topic: Modal backdrop is not working
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.)
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 ).
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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