2019-08-23 15:20:22 +02:00
|
|
|
Bootstrap modal component.
|
|
|
|
|
2019-09-25 15:43:37 +02:00
|
|
|
it's required to have an element `<div id={"modal-container"}/>` somewhere on the page since modals are rendered in portals.
|
|
|
|
|
|
|
|
```js
|
|
|
|
<div id={"modal-container"}/>
|
|
|
|
```
|
|
|
|
|
|
|
|
I have no idea why example doesn't work here but you can investigate HTML code and Foris project.
|
|
|
|
|
2019-08-23 15:20:22 +02:00
|
|
|
```js
|
|
|
|
import {ModalHeader, ModalBody, ModalFooter} from './Modal';
|
|
|
|
|
|
|
|
import {useState} from 'react';
|
|
|
|
const [shown, setShown] = useState(false);
|
|
|
|
|
|
|
|
<>
|
2019-09-25 15:43:37 +02:00
|
|
|
<Modal setShown={setShown} shown={shown}>
|
2019-08-23 15:20:22 +02:00
|
|
|
<ModalHeader setShown={setShown} title='Warning!'/>
|
|
|
|
<ModalBody><p>Bla bla bla...</p></ModalBody>
|
|
|
|
<ModalFooter>
|
|
|
|
<button
|
|
|
|
className='btn btn-secondary'
|
|
|
|
onClick={() => setShown(false)}
|
|
|
|
>Skip it</button>
|
|
|
|
</ModalFooter>
|
|
|
|
</Modal>
|
|
|
|
|
2019-09-25 15:43:37 +02:00
|
|
|
<button className='btn btn-secondary' onClick={()=>setShown(true)}>
|
|
|
|
Show modal
|
|
|
|
</button>
|
2019-08-23 15:20:22 +02:00
|
|
|
</>
|
|
|
|
```
|