> For the complete documentation index, see [llms.txt](https://boxlang.ortusbooks.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://boxlang.ortusbooks.com/boxlang-framework/modularity/ui-compatibility/reference/components/window.md).

# Window

Creates an in-page pop-up window backed by a native `<dialog>` element. The component generates the required HTML/JS bootstrap and delegates all interactive behaviour to the `cfwindow.js` ES module.

## Syntax

```boxlang
<bx:window 
    name="string"
    title="string"
    source="string"
    bodyStyle="string"
    headerStyle="string"
    width="number"
    height="number"
    minWidth="number"
    minHeight="number"
    x="number"
    y="number"
    center="boolean"
    initShow="boolean"
    modal="boolean"
    closable="boolean"
    draggable="boolean"
    resizable="boolean"
    destroyOnClose="boolean"
    refreshOnShow="boolean"
    onBindError="string"
    id="string">
    <!-- Body content -->
</bx:window>
```

## Attributes

| Attribute        | Type      | Required | Description                                                         | Default        |
| ---------------- | --------- | -------- | ------------------------------------------------------------------- | -------------- |
| `name`           | `string`  | **Yes**  | Unique name of the window on the page                               |                |
| `title`          | `string`  | No       | Text displayed in the window title bar (supports HTML)              | `""`           |
| `source`         | `string`  | No       | URL whose response becomes the window body (overrides body content) | `""`           |
| `bodyStyle`      | `string`  | No       | CSS style specification for the window body                         | `""`           |
| `headerStyle`    | `string`  | No       | CSS style specification for the window header                       | `""`           |
| `width`          | `number`  | No       | Width of the window in pixels                                       | `500`          |
| `height`         | `number`  | No       | Height of the window in pixels                                      | `300`          |
| `minWidth`       | `number`  | No       | Minimum width users can resize the window to                        | `0`            |
| `minHeight`      | `number`  | No       | Minimum height users can resize the window to                       | `0`            |
| `x`              | `number`  | No       | Horizontal pixel coordinate of the window upper-left corner         | `""`           |
| `y`              | `number`  | No       | Vertical pixel coordinate of the window upper-left corner           | `""`           |
| `center`         | `boolean` | No       | Center the window over the browser viewport                         | `false`        |
| `initShow`       | `boolean` | No       | Show the window when the page loads                                 | `false`        |
| `modal`          | `boolean` | No       | Prevent interaction with the page while window is open              | `false`        |
| `closable`       | `boolean` | No       | Show a close button on the title bar                                | `true`         |
| `draggable`      | `boolean` | No       | Allow the user to drag the window                                   | `true`         |
| `resizable`      | `boolean` | No       | Allow the user to resize the window                                 | `true`         |
| `destroyOnClose` | `boolean` | No       | Remove the window from the DOM when closed                          | `false`        |
| `refreshOnShow`  | `boolean` | No       | Re-fetch the source URL each time the window is shown               | `false`        |
| `onBindError`    | `string`  | No       | JavaScript function name called when a bind expression errors       | `""`           |
| `id`             | `string`  | No       | HTML id for the root dialog element                                 | Auto-generated |

## Examples

### Basic window

```boxlang
<bx:window name="myWindow" title="Hello World" width="400" height="300" initShow="true">
    <p>Body content here</p>
</bx:window>
```

### Modal window with external source

```boxlang
<bx:window 
    name="detailsWindow" 
    title="User Details" 
    source="user-details.bxm"
    width="600" 
    height="400"
    modal="true"
    center="true">
</bx:window>
```

### Configurable window

```boxlang
<bx:window 
    name="settingsWindow" 
    title="<b>Settings</b>" 
    width="500"
    height="350"
    minWidth="300"
    minHeight="200"
    closable="true"
    draggable="true"
    resizable="true"
    center="true"
    bodyStyle="padding: 1rem;">
    <h3>Application Settings</h3>
    <p>Configure your preferences below.</p>
</bx:window>
```

## Usage Notes

* Backed by the native HTML `<dialog>` element for accessibility
* The `source` attribute overrides any body content when provided
* Use `refreshOnShow="true"` to re-fetch source content each time the window opens
* The window can be controlled via JavaScript using the `ColdFusion.Window` API
* Requires BoxLang AJAX JavaScript files (use `<bx:ajaximport>`)

## Related Components

* [AjaxImport](/boxlang-framework/modularity/ui-compatibility/reference/components/ajaximport.md) - Import required AJAX files
* [Pod](/boxlang-framework/modularity/ui-compatibility/reference/components/pod.md) - Simpler container with optional title bar


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://boxlang.ortusbooks.com/boxlang-framework/modularity/ui-compatibility/reference/components/window.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.