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.  

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;

CartoonNetwork159 pro answered 6 years ago


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

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

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