Topic: Opens modal in another modal
CartoonNetwork159 pro asked 6 years ago
CartoonNetwork159 pro answered 6 years ago
Anna Morawska staff answered 6 years ago
import React from 'react';
import {
Container,
Button,
Modal,
ModalBody,
ModalHeader,
ModalFooter
} from 'mdbreact';
class ModalPage extends React.Component {
constructor(props) {
super(props);
this.state = {
modal1: false,
modal2: false
};
}
toggle = nr => {
let modalNumber = 'modal' + nr;
this.setState({
[modalNumber]: !this.state[modalNumber]
});
};
render() {
return (
<Container>
<Button onClick={() => this.toggle(1)}>First Modal</Button>
<Modal isOpen={this.state.modal1} toggle={() => this.toggle(1)}>
<ModalHeader toggle={() => this.toggle(1)}>Modal title</ModalHeader>
<ModalBody>(...)</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={() => this.toggle(1)}>
Close
</Button>
<Button color="primary" onClick={() => this.toggle(2)}>
Open new Modal
</Button>
</ModalFooter>
</Modal>
<Modal
backdrop={false}
isOpen={this.state.modal2}
toggle={() => this.toggle(2)}
>
<ModalHeader toggle={() => this.toggle(2)}>Second Modal</ModalHeader>
<ModalBody>(...)</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={() => this.toggle(2)}>
Close
</Button>
<Button color="primary">Save changes</Button>
</ModalFooter>
</Modal>
</Container>
);
}
}
export default ModalPage;
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.7.1
- Device: MAC Pro
- Browser: Google Chrome
- OS: MACOS
- Provided sample code: No
- Provided link: No