This method allows you to open a modal window in the main interface with an additional page of your mini-application.
Platforms
- B2B-Web
All Condo Bridge methods can be used within a modal window page in the same way as within the main mini-application window.
Method params
| Parameter name | Parameter type | Required | Parameter description |
|---|---|---|---|
| title | string | yes | Modal window title |
| url | string | yes | url of the page to be opened in the modal window |
| size | small | big | no | The size of the modal window. Examples can be found here |
| initialHeight | number | no | The initial height of the modal window |
Return value
If successful, method will return JSON object containing single field
modalId - ID of opened modal window,
which can be used to close corresponding window:json{ "modalId": "d21ec5e9-aafe-4552-b8ce-825f9c48c7ea" }
This parameter will also be embedded in the url of the opened window as a query parameter, so you don't have to pass it forward from the main window by yourself.
Usage example
Below is an example of opening a modal window from the main page of a mini-application:
typescript// pages/index.tsx import React, { useCallback, useState } from 'react' import bridge from '@open-condo/bridge' import { Button } from '@open-condo/ui' export default function MiniappPage (): React.ReactNode { const [openModalId, setOpenModalId] = useState<string | null>(null) const openModal = useCallback(() => { bridge.send('CondoWebAppShowModalWindow', { url: 'http://localhost:3001/modal', size: 'small', title: 'My modal title', }).then((data) => { setOpenModalId(data.modalId) }) }, []) return ( <Button type='primary' onClick={openModal}>Open modal window</Button> ) }
