spz-lightbox#

#When to Use

When you need users to handle tasks without navigating away from the current page, disrupting their workflow, you can use lightbox to open a floating layer in the center of the current page to carry out the corresponding operations.

#Code Demonstration

#Basic Usage

• When the lightbox is open, it can be closed by clicking on the overlay or the close button.
• When the lightbox is open, scrolling is disabled at the bottom of the page.

<button @tap="lightbox.open">Open lightbox</button>

<spz-lightbox layout="nodisplay" id="lightbox" hidden>
  <div>
    <div>
      <h3>Basic Lightbox</h3>
      <button @tap="lightbox.close">Close</button>
    </div>
    <div>Some contents...</div>
    <div>Some contents...</div>
    <div>Some contents...</div>
  </div>
</spz-lightbox>

#Properties

#Methods

#open

Opens the dialog box, no parameters needed.

#close

Closes the dialog box, no parameters needed.

#Events

open

This event is automatically triggered by the component when the dialog box is opened, no parameters needed.

close

This event is automatically triggered by the component when the dialog box is closed, no parameters needed.

#AI Summary (LLM Ready)

• Component ID: spz-lightbox
• One-line purpose: Modal dialog box.
• Detected attribute rows: 0
• Detected method subsections: 2
• Detected event subsections: 2
• Top attribute names: none (needs manual completion)
• Top method names: open, close
• Top event names: open, close
• Reading order: start from usage/examples, then verify attributes, methods, and events.
• Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/