> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Introduction

## Article: Introduction

## Article Link: https://dev.wix.com/docs/sdk/site-sdk/pages-and-navigation/lightbox/introduction.md

## Article Content:

# About the Lightbox API

The Lightbox API lets you show the site's popups over the current page. The API calls a popup a lightbox, so its names, such as `LightboxDefinition`, use that word. Use it to open a popup from an action on the page, such as a product quick view, with the data the popup needs.

With the Lightbox API, you can:

- Open a popup over the current page.
- Specify a value when you open a popup, and read it from components inside the popup.
- Close the open popup.

Popups are pages. They appear in the `pages` map of `@wix/site-service-pages` alongside ordinary pages, with `popup` set to `true`.

## Before you begin

It's important to note the following points before starting to code:

- Popups can't stack. Opening a popup closes any popup that's already open.
- The API doesn't report when a popup closes, and can't return data from a popup to the page that opened it. Site visitors can close a popup themselves at any time, so don't write code that waits for a popup to close or for a result from it.

## Use cases

- [Pass data to a popup when you open it](https://dev.wix.com/docs/sdk/site-sdk/pages-and-navigation/lightbox/sample-flows.md)
- [Show the payload of the open popup](https://dev.wix.com/docs/sdk/site-sdk/pages-and-navigation/lightbox/sample-flows.md)

## Terminology

- **Popup**: A page that opens over the page a visitor is already on, rather than replacing it.
- **Lightbox**: The API's name for a popup, as in `LightboxDefinition` and `lightboxService`.
- **Payload**: Data you pass to a popup when you open it, which components inside the popup can read.

## SDK setup

@package_metadata:@wix/site-service-lightbox

To use the API, install the `@wix/site-service-lightbox` package:

```bash
npm install @wix/site-service-lightbox
```

#### Import the package

```ts
import { LightboxDefinition } from '@wix/site-service-lightbox/definition'
```

#### Import types

Import any type shown in these docs from `@wix/site-service-lightbox/types`:

```ts
import type { <TypeName> } from '@wix/site-service-lightbox/types'
```

#### Resolve the service

In a React component, resolve the service with the `useService` hook:

```tsx
import { useService } from '@wix/services-manager-react'
import { LightboxDefinition } from '@wix/site-service-lightbox/definition'

function CloseButton() {
    const lightboxService = useService(LightboxDefinition)

    return <button onClick={() => lightboxService.close()}>Close</button>
}
```