Opens modal in another modal


Topic: Opens modal in another modal

CartoonNetwork159 pro asked 6 years ago

Hi, I've add modal component to another one modal then when I'm open sub modal and clicking at any area of this modal it will automatically fade out. How can I fix it? Thanks.  

CartoonNetwork159 pro answered 6 years ago

OK, I found solution to fix this by add API > backdrop={false}

Anna Morawska staff answered 6 years ago

Hi there, I've just tried to recreate this and it looks like everything works fine. Maybe check out this code:
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;

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: 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