Topic: mdbmodal backdrop is not working...
innovative23 pro asked 6 years ago
https://mdbootstrap.com/docs/react/modals/basic/#remove-backdrop 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 6 years ago
Hi,
you are right, It's already fixed, It will be available in the upcoming version. Thank you for reporting, we appreciate this.
Best,
Ania
innovative23 pro commented 6 years ago
Thank you. Any approx date for next release?
Anna Morawska staff commented 6 years ago
This Monday, February 4th
Anna Morawska staff answered 6 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 (
<MDBContainer>
<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>
<MDBModalBody>
...
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="primary" outline onClick={this.toggle(12)}>Close</MDBBtn>
<MDBBtn color="primary">Save changes</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
); } }
export default ModalPage;
innovative23 pro commented 6 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}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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