spz-lightbox

In the following code, use buttons to open and close the lightbox.

<spz-lightbox id="lightbox" layout="nodisplay" has-mask>
  <header>Header</header>
  <main>
    <h3>Content</h3>
  </main>
  <footer>Footer</footer>
  <button type="button" @tap="lightbox.close();">Close lightbox</button>
</spz-lightbox>

<button type="button" @tap="lightbox.open();">Open lightbox</button>

Using a few animations to open the lightbox. It has the following values:

• fade-in: default Be opened in fade-in and fade-out animation.
• fly-in-bottom: Be opened in fly-from-bottom animation.
• fly-in-top: Be opened in fly-from-top animation.

A number less than 100. Used to set the y-axis distance of the element in the parent element。

A number less than 100. Used to set the x-axis distance of the element in the parent element。

If this attribute is present, before the element is opened, it will calculate whether to open up or down. Often used to implement drop-down lists.

If this attribute is present, the element will not be closed when it is not focused.

If this attribute is present, when the lightbox is closed, its inner elements will unmount.

If this attribute is present, the element will show a mask. The element will be closed when the user clicks or taps the mask.

A string of the HTML DOM ID. It specifies which element the mask is placed under.

To open the lightbox. No parameter required.

To close the lightbox. No parameter required.

Be automatically triggered when the lightbox opens.

Be automatically triggered when the lightbox closes.