I’m trying to display a modal when clicking the button by adding the macro in the confluence page with Forge in custom UI template.
front-end code:
import React, { useEffect, useState, useCallback } from 'react';
import { invoke } from '@forge/bridge';
import Button from '@atlaskit/button/new';
import Modal, {
ModalBody,
ModalFooter,
ModalHeader,
ModalTitle,
ModalTransition,
} from '@atlaskit/modal-dialog';
import { Label } from '@atlaskit/form';
import Select from '@atlaskit/select';
function App() {
const [data, setData] = useState(null);
const [isOpen, setIsOpen] = useState(false);
const openModal = useCallback(() => setIsOpen(true), []);
const closeModal = useCallback(() => setIsOpen(false), []);
useEffect(() => {
invoke('getText', { example: 'my-invoke-variable' }).then(setData);
}, []);
return (
<div>
<div>
<Button appearance="primary" onClick={openModal}>
Open modal
</Button>
</div>
<ModalTransition>
{isOpen && (
<Modal onClose={closeModal}>
<ModalHeader>
<ModalTitle>Edit the details: </ModalTitle>
</ModalHeader>
<ModalBody>
<div className='' style={{margin: "14px 0"}}>
<Label htmlFor="single-select-example">Choose a city <span style={{color: "red"}}>*</span> </Label>
<Select
inputId="single-select-example"
className="single-select"
classNamePrefix="react-select"
options={[
{ label: 'Adelaide', value: 'adelaide' },
{ label: 'Brisbane', value: 'brisbane' },
{ label: 'Canberra', value: 'canberra' },
{ label: 'Darwin', value: 'darwin' },
{ label: 'Hobart', value: 'hobart' },
{ label: 'Melbourne', value: 'melbourne' },
{ label: 'Perth', value: 'perth' },
{ label: 'Sydney', value: 'sydney' },
]}
placeholder="Choose a city"
/>
</div>
</ModalBody>
<ModalFooter>
<Button appearance="subtle" onClick={closeModal}>
Cancel
</Button>
<Button appearance="primary" onClick={closeModal}>
Duplicate
</Button>
</ModalFooter>
</Modal>
)}
</ModalTransition>
</div>
);
}
export default App;
I need the modal to be displayed outside of the button, but the modal is displayed within a frame. How can I achieve that.
Can anyone help me how to resolve this issue ?
