1
0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2024-07-05 20:53:12 +00:00
foris-js/src/bootstrap/Modal.md

34 lines
924 B
Markdown
Raw Normal View History

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