Overlay QML Type | Qt Quick Controls 6.3.0

- Qt 6.3
- Qt Quick Controls
- QML Types
- Overlay QML Type
- Qt 6.3.0 Reference Documentation

# Overlay QML Type

A window overlay for popups. More...

Import Statement: | import QtQuick.Controls
Since: | Qt 5.10
Inherits: | Item

- List of all members, including inherited members

## Attached Properties

- modal : Component
- modeless : Component
- overlay : Overlay

## Attached Signals

- pressed()
- released()

## Detailed Description

Overlay provides a layer for popups, ensuring that popups are displayed above other content and that the background is dimmed when a modal or dimmed popup is visible.

The overlay is an ordinary Item that covers the entire window. It can be used as a visual parent to position a popup in scene coordinates.

The following example uses the attached Overlay.overlay property to position a popup in the center of the window, despite the position of the button that opens the popup:

     Button {
         onClicked: popup.open()

         Popup {
             id: popup

             parent: Overlay.overlay

             x: Math.round((parent.width - width) / 2)
             y: Math.round((parent.height - height) / 2)
             width: 100
             height: 100
         }
     }

See also ApplicationWindow.

## Attached Property Documentation

Overlay.modal : Component

This attached property holds a component to use as a visual item that implements background dimming for modal popups. It is created for and stacked below visible modal popups.

The property can be attached to any popup.

For example, to change the color of the background dimming for a modal popup, the following code can be used:

     Popup {
         id: popup
         width: 400
         height: 400
         modal: true
         visible: true

         Overlay.modal: Rectangle {
             color: "#aacfdbe7"
         }
     }

See also Popup::modal.

Overlay.modeless : Component

This attached property holds a component to use as a visual item that implements background dimming for modeless popups. It is created for and stacked below visible dimming popups.

The property can be attached to any popup.

For example, to change the color of the background dimming for a modeless popup, the following code can be used:

     Popup {
         id: popup
         width: 400
         height: 400
         dim: true
         visible: true

         Overlay.modeless: Rectangle {
             color: "#aacfdbe7"
         }
     }

See also Popup::dim.

[read-only] Overlay.overlay : Overlay

This attached property holds the window overlay item.

The property can be attached to any item, popup, or window. When attached to an item or a popup, the value is `null` if the item or popup is not in a window.

## Attached Signal Documentation

pressed()

This attached signal is emitted when the overlay is pressed by the user while a popup is visible.

The signal can be attached to any item, popup, or window. When attached to an item or a popup, the signal is only emitted if the item or popup is in a window.

Note: The corresponding handler is `onPressed`.

released()

This attached signal is emitted when the overlay is released by the user while a popup is visible.

The signal can be attached to any item, popup, or window. When attached to an item or a popup, the signal is only emitted if the item or popup is in a window.

Note: The corresponding handler is `onReleased`.