> ## 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(".page-header");
        if (!header) return console.error("Could not find header element");
        searchProvider.openModal({
          alignerRef: 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(resolve => onExistsObserver(".page-header", resolve));
    onExistsObserver(".open-search-button", button => {
      button.addEventListener("click", () => searchProvider.openModal({ alignerRef: header }));
    });
    ```
  </Accordion>
</AccordionGroup>

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

  When the viewport height is below 900px, the search modal will overlook the element reference passed to the `alignerRef` property and center the search modal to the top of the viewport. 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>