> ## Documentation Index
> Fetch the complete documentation index at: https://docs.depict.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Adding a way to open the SearchModal

Expand and use one or multiple of the following examples to add a way to open the SearchModal.

See [overview](/js-ui-guide/search/overview) for a disambiguation of the different search components.

<AccordionGroup>
  <Accordion title="Open centered modal">
    ```tsx theme={null}
    import { onExistsObserver } from "@depict-ai/js-ui";

    onExistsObserver(".open-search-button", button => {
      button.addEventListener("click", () => searchProvider.openModal());
    });
    ```
  </Accordion>

  <Accordion title="Open aligned modal">
    ```tsx theme={null}
    import { onExistsObserver } from "@depict-ai/js-ui";

    onExistsObserver(".open-search-button", button => {
      button.addEventListener("click", () => {
        const header = document.querySelector<HTMLElement>(".page-header");
        if (!header) return console.error("Could not find header element");
        searchProvider.openModal(header);
      });
    });
    ```
  </Accordion>

  <Accordion title="Render a SearchField that opens a modal aligned to the SearchField itself:">
    ```tsx theme={null}
    import { SearchField, onExistsObserver } from "@depict-ai/js-ui";

    onExistsObserver(".search-field-wrapper", (element) =>
      element.append(SearchField({ searchProvider }))
    );
    ```
  </Accordion>

  <Accordion title="Render a SearchField that opens a modal aligned to another DOM element">
    ```tsx theme={null}
    import { SearchField, onExistsObserver } from "@depict-ai/js-ui";

    const header = await new Promise<HTMLElement>(resolve => onExistsObserver<HTMLElement>(".page-header", resolve));
    onExistsObserver(".open-search-button", button => {
      button.addEventListener("click", () => searchProvider.openModal(header));
    });
    ```
  </Accordion>
</AccordionGroup>

<Note>
  📘 **Modal alignment on smaller screens**

  On short viewports the search modal ignores the aligner element passed to `openModal` and snaps to the top of the viewport instead — at a viewport height of 790px or less on devices with a fine pointer (mouse/trackpad), and 1000px or less on touch devices. This is to use the available space as efficiently as possible.
</Note>

<Info>You can find the related [reference](/reference/search-sdk/js-ui#searchfield-function) here</Info>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.