import React, { Component, Fragment } from "react";
import {
Button,
Modal,
ModalBody,
ModalHeader,
ModalFooter
} from "mdbreact";
class App extends Component {
state = {
modal6: false
};

toggle(nr) {
let modalNumber = "modal" + nr;
this.setState({
[modalNumber]: !this.state[modalNumber]
});
}


render() {
return (
<Fragment>
<Button color="secondary" onClick={() => this.toggle(6)}>
Top right
</Button>
<Modal
isOpen={this.state.modal6}
toggle={() => this.toggle(6)}
side
position="top-right"
>
<ModalHeader toggle={() => this.toggle(6)}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam.
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={() => this.toggle(6)}>
Close
</Button>
<Button color="primary">Save changes</Button>
</ModalFooter>
</Modal>
</Fragment>
);
}
}

export default App;

scarranca free commented 5 years ago

Hi Ania, i tried your example code copy paste but still appearing in the center of the screen...

<p>Hi Ania, i tried your example code copy paste but still appearing in the center of the screen...</p>

Please insert min. 15 characters.

Publish

---

Anna Morawska staff commented 5 years ago

Hm, this is strange, it works fine for me. Which version of mdbreact do you use? 

<p>Hm, this is strange, it works fine for me. Which version of mdbreact do you use? </p>

Please insert min. 15 characters.

Publish

---

scarranca free commented 5 years ago

Im using MDB 4.7.1

<p>Im using MDB 4.7.1</p>

Please insert min. 15 characters.

Publish

---

Anna Morawska staff commented 5 years ago

Please try to update your mdbreact version, today we're going to release v.4.8.5.

<p>Please try to update your mdbreact version, today we're going to release v.4.8.5.</p>

Please insert min. 15 characters.

Publish

---