zz-shopify-components 0.3.1-beta.2 → 0.3.1-beta.3

package/assets/zz-modal.js

@@ -0,0 +1,395 @@
+/*
+  - Uses <dialog> when available for native a11y and focus management
+  - Shadow DOM for internal styles; slots for user content (tailwind utilities apply to slotted nodes)
+  - Attribute reflection and programmatic API: show(), hide(), toggle()
+  - Options via attributes: close-on-esc, close-on-backdrop, scroll-lock, inert-others
+  - Global open/close triggers: [data-zz-modal-target], [data-zz-modal-close]
+*/
+
+(() => {
+  if (customElements.get('zz-modal')) return;
+
+  const STYLE_TEXT = `
+    :host {
+      position: relative;
+      display: contents; /* do not affect layout where placed */
+    }
+
+    dialog[part="dialog"] {
+      border: none;
+      padding: 0;
+      margin: 0;
+      width: auto;
+      max-width: var(--zz-modal-max-width, 90vw);
+      max-height: var(--zz-modal-max-height, 85vh);
+      background: transparent; /* panel carries background */
+      overflow: visible;
+    }
+
+    /* Backdrop for native <dialog>. */
+    dialog[part="dialog"]::backdrop {
+      background: var(--zz-modal-backdrop, rgba(0,0,0,0.5));
+      backdrop-filter: var(--zz-modal-backdrop-filter, blur(0px));
+    }
+
+    .panel {
+      position: fixed;
+      inset: 0;
+      z-index: var(--zz-modal-z-index, 9999);
+      display: grid;
+      place-items: center;
+      pointer-events: none; /* enable backdrop clicks via dialog */
+    }
+
+    .panel-inner {
+      pointer-events: auto;
+      background: var(--zz-modal-background, #ffffff);
+      color: inherit;
+      border-radius: var(--zz-modal-radius, 12px);
+      box-shadow: var(--zz-modal-shadow, 0 20px 60px rgba(0,0,0,0.2));
+      width: var(--zz-modal-width, min(720px, 92vw));
+      max-height: var(--zz-modal-max-height, 85vh);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      transform-origin: center center;
+      opacity: 0;
+      transform: translateY(8px) scale(0.98);
+      transition: none;
+    }
+
+    :host([open]) .panel-inner {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      .panel-inner {
+        transition: opacity 160ms ease, transform 160ms ease;
+      }
+    }
+
+    .header, .footer {
+      padding: var(--zz-modal-padding, 16px);
+      flex: 0 0 auto;
+    }
+    :host([no-header]) .header, :host([no-header-auto]) .header { display: none; padding: 0; }
+    :host([no-footer]) .footer, :host([no-footer-auto]) .footer { display: none; padding: 0; }
+    .body {
+      padding: var(--zz-modal-padding, 16px);
+      overflow: auto;
+      flex: 1 1 auto;
+    }
+    .close-btn {
+      all: unset;
+      cursor: pointer;
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      width: 32px;
+      height: 32px;
+      border-radius: 9999px;
+      display: grid;
+      place-items: center;
+    }
+    .close-btn:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
+  `;
+
+  const TEMPLATE = document.createElement('template');
+  TEMPLATE.innerHTML = `
+    <dialog part="dialog" aria-modal="true">
+      <div class="panel" part="backdrop">
+        <div class="panel-inner" role="document" part="panel">
+          <button class="close-btn" part="close-button" aria-label="Close" data-zz-modal-close>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+          </button>
+          <header class="header" part="header"><slot name="header"></slot></header>
+          <section class="body" part="body"><slot></slot></section>
+          <footer class="footer" part="footer"><slot name="footer"></slot></footer>
+        </div>
+      </div>
+    </dialog>
+  `;
+
+  class ZZModal extends HTMLElement {
+    static get observedAttributes() { return ['open']; }
+
+    constructor() {
+      super();
+      this._onKeydown = this._onKeydown.bind(this);
+      this._onNativeClose = this._onNativeClose.bind(this);
+      this._onMouseDown = this._onMouseDown.bind(this);
+      this._onClick = this._onClick.bind(this);
+      this._previousActive = null;
+      this._mouseDownInsidePanel = false;
+
+      const shadow = this.attachShadow({ mode: 'open' });
+      const style = document.createElement('style');
+      style.textContent = STYLE_TEXT;
+      shadow.appendChild(style);
+      shadow.appendChild(TEMPLATE.content.cloneNode(true));
+
+      this._dialog = shadow.querySelector('dialog');
+      this._panel = shadow.querySelector('.panel-inner');
+      this._closeBtn = shadow.querySelector('[data-zz-modal-close]');
+      this._slotHeader = shadow.querySelector('slot[name="header"]');
+      this._slotFooter = shadow.querySelector('slot[name="footer"]');
+    }
+
+    connectedCallback() {
+      // Delegated internal events
+      this._closeBtn.addEventListener('click', () => this.hide());
+      this._dialog.addEventListener('close', this._onNativeClose);
+      this._dialog.addEventListener('mousedown', this._onMouseDown);
+      this._dialog.addEventListener('click', this._onClick);
+
+      // Reflect open state if attribute present at mount
+      if (this.hasAttribute('open')) {
+        // Defer to ensure upgraded before open
+        queueMicrotask(() => this.show());
+      }
+
+      // Auto hide empty header/footer
+      this._slotHeader.addEventListener('slotchange', () => this._updateSlotVisibility());
+      this._slotFooter.addEventListener('slotchange', () => this._updateSlotVisibility());
+      // Initial
+      this._updateSlotVisibility();
+    }
+
+    disconnectedCallback() {
+      this._dialog.removeEventListener('close', this._onNativeClose);
+      this._dialog.removeEventListener('mousedown', this._onMouseDown);
+      this._dialog.removeEventListener('click', this._onClick);
+      document.removeEventListener('keydown', this._onKeydown);
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (name === 'open' && oldValue !== newValue) {
+        if (this.hasAttribute('open')) {
+          this.show();
+        } else {
+          this.hide();
+        }
+      }
+    }
+
+    get open() { return this._dialog?.open || this.hasAttribute('open'); }
+    set open(val) { if (val) this.setAttribute('open', ''); else this.removeAttribute('open'); }
+
+    show() { this._openInternal(true); }
+    hide() { this._closeInternal(true); }
+    toggle() { this.open ? this.hide() : this.show(); }
+
+    // Aliases
+    showModal() { this.show(); }
+    close() { this.hide(); }
+
+    _emit(name, detail = {}) {
+      this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+    }
+
+    _openInternal(emit = false) {
+      if (this._dialog.open) return;
+      this._previousActive = document.activeElement;
+
+      // Scroll lock
+      if (!this.hasAttribute('no-scroll-lock')) {
+        this._lockScroll();
+      }
+
+      // Inert others
+      if (this.hasAttribute('inert-others')) {
+        this._toggleInert(true);
+      }
+
+      // Native dialog path
+      try {
+        if ('showModal' in HTMLDialogElement.prototype) {
+          this._dialog.showModal();
+        } else {
+          // Fallback
+          this._dialog.setAttribute('open', '');
+        }
+      } catch (_) {
+        this._dialog.setAttribute('open', '');
+      }
+
+      // Sync attribute for CSS animations
+      this.setAttribute('open', '');
+
+      // Listeners
+      document.addEventListener('keydown', this._onKeydown);
+
+      // Focus first focusable within panel
+      this._focusInitial();
+
+      if (emit) this._emit('zz-modal:open');
+    }
+
+    _closeInternal(emit = false) {
+      if (!this._dialog.open && !this.hasAttribute('open')) return;
+
+      // Remove listeners
+      document.removeEventListener('keydown', this._onKeydown);
+
+      // Native dialog close
+      try {
+        if (this._dialog.open) this._dialog.close();
+      } catch (_) {
+        // ignore
+      }
+      this.removeAttribute('open');
+
+      // Restore scroll and inert
+      if (!this.hasAttribute('no-scroll-lock')) {
+        this._unlockScroll();
+      }
+      if (this.hasAttribute('inert-others')) {
+        this._toggleInert(false);
+      }
+
+      // Restore focus
+      if (this._previousActive && typeof this._previousActive.focus === 'function') {
+        this._previousActive.focus({ preventScroll: true });
+      }
+      this._previousActive = null;
+
+      if (emit) this._emit('zz-modal:close');
+    }
+
+    _onKeydown(e) {
+      const escAllowed = !this.hasAttribute('no-esc-close');
+      if (e.key === 'Escape' && escAllowed) {
+        e.stopPropagation();
+        this.hide();
+      }
+
+      // Basic focus trap for fallback scenario
+      if (e.key === 'Tab' && !('showModal' in HTMLDialogElement.prototype)) {
+        const focusables = this._getFocusable();
+        if (focusables.length === 0) return;
+        const first = focusables[0];
+        const last = focusables[focusables.length - 1];
+        const active = this.shadowRoot.activeElement || document.activeElement;
+        if (e.shiftKey) {
+          if (active === first || !this.contains(active)) {
+            e.preventDefault();
+            last.focus();
+          }
+        } else {
+          if (active === last || !this.contains(active)) {
+            e.preventDefault();
+            first.focus();
+          }
+        }
+      }
+    }
+
+    _onNativeClose() {
+      // Ensure attribute sync and cleanup
+      this._closeInternal(true);
+    }
+
+    _onMouseDown(e) {
+      // Track whether mousedown originated inside the panel to differentiate drags
+      const path = e.composedPath();
+      this._mouseDownInsidePanel = path.includes(this._panel);
+    }
+
+    _onClick(e) {
+      const backdropClose = !this.hasAttribute('no-backdrop-close');
+      if (!backdropClose) return;
+
+      // If click ended outside panel and started outside panel -> treat as backdrop click
+      const path = e.composedPath();
+      const clickInsidePanel = path.includes(this._panel);
+      if (!clickInsidePanel && !this._mouseDownInsidePanel) {
+        this.hide();
+      }
+      this._mouseDownInsidePanel = false;
+    }
+
+    _updateSlotVisibility() {
+      try {
+        const hasHeader = (this._slotHeader.assignedNodes({ flatten: true }).filter(n => n.nodeType === 1 || (n.nodeType === 3 && n.textContent.trim())).length) > 0;
+        const hasFooter = (this._slotFooter.assignedNodes({ flatten: true }).filter(n => n.nodeType === 1 || (n.nodeType === 3 && n.textContent.trim())).length) > 0;
+        if (!hasHeader) this.setAttribute('no-header-auto', ''); else this.removeAttribute('no-header-auto');
+        if (!hasFooter) this.setAttribute('no-footer-auto', ''); else this.removeAttribute('no-footer-auto');
+      } catch (_) {
+        // ignore
+      }
+    }
+
+    _getFocusable() {
+      const root = this.shadowRoot;
+      const within = root.querySelector('.panel-inner');
+      return Array.from(within.querySelectorAll([
+        'a[href]','area[href]','input:not([disabled])','select:not([disabled])','textarea:not([disabled])',
+        'button:not([disabled])','iframe','object','embed','[contenteditable]','[tabindex]:not([tabindex="-1"])'
+      ].join(',')));
+    }
+
+    _focusInitial() {
+      const focusables = this._getFocusable();
+      if (focusables.length > 0) {
+        focusables[0].focus({ preventScroll: true });
+      } else {
+        // Focus the dialog so that ESC works consistently
+        this._dialog.focus({ preventScroll: true });
+      }
+    }
+
+    _lockScroll() {
+      const body = document.body;
+      this._prevBodyOverflow = body.style.overflow;
+      body.style.overflow = 'hidden';
+      body.setAttribute('data-zz-modal-open', '');
+    }
+
+    _unlockScroll() {
+      const body = document.body;
+      body.style.overflow = this._prevBodyOverflow || '';
+      body.removeAttribute('data-zz-modal-open');
+    }
+
+    _toggleInert(isInert) {
+      const toInert = [];
+      const root = document.body;
+      for (const child of Array.from(root.children)) {
+        if (child === this.parentElement) continue;
+        toInert.push(child);
+      }
+      toInert.forEach((el) => {
+        if (isInert) el.setAttribute('inert', ''); else el.removeAttribute('inert');
+      });
+    }
+  }
+
+  customElements.define('zz-modal', ZZModal);
+
+  // Global open/close triggers
+  document.addEventListener('click', (e) => {
+    const openTrigger = e.target.closest('[data-zz-modal-target]');
+    if (openTrigger) {
+      const selector = openTrigger.getAttribute('data-zz-modal-target');
+      if (selector) {
+        const modal = document.querySelector(selector);
+        if (modal && modal.show) {
+          e.preventDefault();
+          modal.show();
+        }
+      }
+      return;
+    }
+    const closeTrigger = e.target.closest('[data-zz-modal-close]');
+    if (closeTrigger) {
+      const hostModal = closeTrigger.closest('zz-modal');
+      if (hostModal && hostModal.hide) {
+        e.preventDefault();
+        hostModal.hide();
+      }
+    }
+  }, { capture: true });
+})();
+
+

package/blocks/zz-button.liquid

@@ -9,6 +9,16 @@
       "label": "按钮文字",
       "default": "按钮"
     },
+    {
+      "type": "text",
+      "id": "btn_id",
+      "label": "按钮id属性值",
+    },
+    {
+      "type": "text",
+      "id": "modal_id",
+      "label": "按钮触发modal的id",
+    },
     {
       "type": "select",
       "id": "function_type",
@@ -188,7 +198,9 @@
   icon_left_margin: block.settings.icon_left_margin,
   icon_right_margin: block.settings.icon_right_margin,
   width: block.settings.mobile_width,
-  class_name: btn_class
+  class_name: btn_class,
+  btn_id: block.settings.btn_id,
+  modal_id: block.settings.modal_id
 %}
 
 

package/docs/zz-modal.md

@@ -0,0 +1,170 @@
+轻量、高性能、可扩展、可访问（a11y）的 Web Component 弹窗，基于原生 `<dialog>` 能力并内置降级方案。
+
+### 特性
+- 原生 `<dialog>`：内建焦点管理、`aria-modal`，退化时提供焦点陷阱与交互保障
+- 高性能：零依赖、轻量动画、滚动锁、Backdrop 点击关闭、ESC 关闭
+- 可扩展：Shadow DOM、`::part(...)`、CSS 变量、事件、编程式 API
+- 易用：全局触发器 `[data-zz-modal-target]`、`[data-zz-modal-close]`
+
+---
+
+### 快速开始（Shopify / Theme Section）
+在 Section 中确保加载脚本（`sections/zz-modal.liquid` 已内置）：
+
+```liquid
+<script defer id="zz-modal-js" src="{{ 'zz-modal.js' | asset_url }}"></script>
+```
+
+无 JS 安全：
+```css
+zz-modal:not(:defined) { display: none !important; }
+```
+
+Section 中通过 CSS 变量响应式配置：
+```css
+#your-modal-id {
+  --zz-modal-radius: {{ section.settings.radius_mobile }}px;
+  --zz-modal-padding: {{ section.settings.padding_mobile }}px;
+  --zz-modal-width: {{ section.settings.width_mobile }};
+}
+@media (min-width: 768px) {
+  #your-modal-id {
+    --zz-modal-radius: {{ section.settings.radius_pc }}px;
+    --zz-modal-padding: {{ section.settings.padding_pc }}px;
+    --zz-modal-width: {{ section.settings.width_pc }};
+  }
+}
+```
+
+Section 设置项（已实现）：
+- 文案：`button_text`
+- Header/Footer 显示：`show_header`、`show_footer`
+- 宽度：`width_mobile`、`width_pc`（支持 `px` 或 `vw`）
+- 圆角：`radius_mobile`、`radius_pc`（单位 px）
+- 内边距：`padding_mobile`、`padding_pc`（单位 px）
+
+> 当 slot 为空时，组件会自动隐藏 Header/Footer（属性 `no-header-auto` / `no-footer-auto`）。
+
+---
+
+### 基本用法
+
+触发按钮 + 弹窗结构：
+```html
+<button data-zz-modal-target="#demo-modal">Open Modal</button>
+
+<zz-modal id="demo-modal">
+  <div slot="header">标题</div>
+  <div>这里是内容</div>
+  <div slot="footer">
+    <button data-zz-modal-close>取消</button>
+    <button data-zz-modal-close>确定</button>
+  </div>
+  <!-- 内置关闭按钮也可用：shadow 内提供 part="close-button" 按钮 -->
+  <!-- 任何带 data-zz-modal-close 的元素都会关闭当前弹窗 -->
+  <!-- 任意元素 data-zz-modal-target="#id" 可打开对应弹窗 -->
+```
+
+---
+
+### 编程式 API
+```js
+const modal = document.querySelector('#demo-modal');
+modal.show();     // 打开
+modal.hide();     // 关闭
+modal.toggle();   // 切换
+// 等价别名：modal.showModal() / modal.close()
+```
+
+---
+
+### 属性（Attributes）
+- `open`：受控显示状态（加上即显示，移除即关闭）
+- `no-esc-close`：禁用 ESC 关闭
+- `no-backdrop-close`：禁用点击遮罩关闭
+- `no-scroll-lock`：禁用页面滚动锁
+- `inert-others`：打开时让页面其它区域 inert（更强的可访问隔离）
+- `no-header` / `no-footer`：强制隐藏 Header/Footer（无视 slot 内容）
+- `no-header-auto` / `no-footer-auto`：组件自动加的属性，用于在对应 slot 为空时隐藏区域
+
+---
+
+### 事件（Events）
+- `zz-modal:open`
+- `zz-modal:close`
+
+监听示例：
+```js
+document.querySelector('#demo-modal')
+  .addEventListener('zz-modal:open', () => console.log('opened'));
+```
+
+---
+
+### 样式定制
+
+CSS 变量：
+- `--zz-modal-width`（默认 `min(720px, 92vw)`）
+- `--zz-modal-max-width`（默认 `90vw`）
+- `--zz-modal-max-height`（默认 `85vh`）
+- `--zz-modal-radius`（默认 `12px`）
+- `--zz-modal-padding`（默认 `16px`）
+- `--zz-modal-background`（默认 `#fff`）
+- `--zz-modal-shadow`（默认 `0 20px 60px rgba(0,0,0,0.2)`）
+- `--zz-modal-backdrop`（默认 `rgba(0,0,0,0.5)`）
+- `--zz-modal-backdrop-filter`（默认 `blur(0px)`）
+- `--zz-modal-z-index`（默认 `9999`）
+
+Shadow Parts：
+- `dialog`、`backdrop`、`panel`、`header`、`body`、`footer`、`close-button`
+
+示例：
+```css
+/* 外部覆盖内部部件样式 */
+zz-modal::part(dialog) { max-width: 720px; }
+zz-modal::part(panel) { border-radius: 16px; }
+
+/* 使用变量 */
+#demo-modal { --zz-modal-background: #111; color: #fff; }
+```
+
+---
+
+### 可访问性（a11y）
+- 原生 `<dialog>` 优先，具备 `aria-modal`，ESC 关闭、焦点管理
+- 降级路径提供基本焦点陷阱与键盘导航保障
+- `inert-others` 可在打开时禁用页面其他区域交互
+
+---
+
+### 无 JS 安全
+网络不佳或脚本未加载时隐藏 Light DOM，避免内容外露：
+```css
+zz-modal:not(:defined) { display: none !important; }
+```
+
+---
+
+### 多实例
+```html
+<button data-zz-modal-target="#m1">打开 1</button>
+<button data-zz-modal-target="#m2">打开 2</button>
+
+<zz-modal id="m1">...</zz-modal>
+<zz-modal id="m2">...</zz-modal>
+```
+
+---
+
+### 常见问题
+- 遮罩点击无效？检查是否设置了 `no-backdrop-close`。
+- 页面滚动未锁定？移除 `no-scroll-lock` 或确认 CSS 未覆盖 `overflow`。
+- Header/Footer 不显示？若未显式设置 `show_header/show_footer`，请确保 slot 有内容；或移除 `no-header/no-footer`。
+
+---
+
+### 变更位置
+- 组件实现：`assets/zz-modal.js`
+- Section：`sections/zz-modal.liquid`
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.3.1-beta.2",
+  "version": "0.3.1-beta.3",
   "description": "Reusable Shopify components for theme projects",
   "keywords": [
     "shopify",

package/sections/zz-modal.liquid

@@ -0,0 +1,147 @@
+  <style>
+    zz-modal:not(:defined) { display: none !important; }
+    /* Responsive modal variables from section settings */
+    #{{ section.settings.modal_id }} {
+      --zz-modal-radius: {{ section.settings.radius_mobile }}px;
+      --zz-modal-padding: {{ section.settings.padding_mobile }}px;
+      --zz-modal-width: {{ section.settings.width_mobile }};
+    }
+    @media (min-width: 768px) {
+      #{{ section.settings.modal_id }} {
+        --zz-modal-radius: {{ section.settings.radius_pc }}px;
+        --zz-modal-padding: {{ section.settings.padding_pc }}px;
+        --zz-modal-width: {{ section.settings.width_pc }};
+      }
+    }
+  </style>
+
+  <zz-modal {% if section.settings.no_backdrop_close %} no-backdrop-close {% endif %} id="{{ section.settings.modal_id }}"{% unless section.settings.show_header %} no-header{% endunless %}{% unless section.settings.show_footer %} no-footer{% endunless %}>
+    {% if section.settings.show_header %}
+    <div slot="header" class="tw-text-[24px] tw-font-semibold">{{ section.settings.header_text }}</div>
+    {% endif %}
+    {% content_for 'blocks' %}
+    {% if section.settings.show_footer %}
+      <div slot="footer" class="tw-flex tw-justify-end tw-gap-2 tw-pt-8">
+        <button class=" tw-text-[16px] " data-zz-modal-close>{{ section.settings.footer_text }}</button>
+      </div>
+    {% endif %}
+  </zz-modal>
+
+  <script>
+    (function(){
+      var id = 'zz-modal-js';
+      if (!document.getElementById(id)) {
+        var s = document.createElement('script');
+        s.id = id;
+        s.src = '{{ 'zz-modal.js' | asset_url }}';
+        s.defer = true;
+        document.head.appendChild(s);
+      }
+    })();
+  </script>
+
+{% schema %}
+{
+  "name": "ZZ Modal",
+  "settings": [
+    {
+      "type": "text",
+      "id": "modal_id",
+      "label": "弹窗id （必填）",
+      "default": "demo-modal"
+    },
+      {
+        "type": "checkbox",
+        "id": "show_header",
+        "label": "显示 Header",
+        "default": false
+      },
+      {
+        "type": "checkbox",
+        "id": "show_footer",
+        "label": "显示 Footer",
+        "default": false
+      },
+      {
+        "type": "checkbox",
+        "id": "no_backdrop_close",
+        "label": "是否禁用遮罩点击关闭",
+        "default": false
+      },
+      {
+        "type": "text",
+        "id": "header_text",
+        "label": "弹窗标题",
+        "default": "弹窗标题"
+      },
+      {
+        "type": "text",
+        "id": "width_mobile",
+        "label": "移动端宽度（如 92vw 或 360px）",
+        "default": "92vw"
+      },
+      {
+        "type": "text",
+        "id": "width_pc",
+        "label": "PC 端宽度（如 720px 或 60vw）",
+        "default": "720px"
+      },
+      {
+        "type": "range",
+        "id": "radius_mobile",
+        "label": "移动端圆角(px)",
+        "min": 0,
+        "max": 40,
+        "step": 1,
+        "default": 12
+      },
+      {
+        "type": "range",
+        "id": "radius_pc",
+        "label": "PC 端圆角(px)",
+        "min": 0,
+        "max": 40,
+        "step": 1,
+        "default": 12
+      },
+      {
+        "type": "range",
+        "id": "padding_mobile",
+        "label": "移动端内边距(px)",
+        "min": 0,
+        "max": 48,
+        "step": 2,
+        "default": 16
+      },
+      {
+        "type": "range",
+        "id": "padding_pc",
+        "label": "PC 端内边距(px)",
+        "min": 0,
+        "max": 64,
+        "step": 2,
+        "default": 20
+      },
+      {
+        "type": "text",
+        "id": "footer_text",
+        "label": "弹窗底部按钮文案",
+        "default": "Close"
+    }
+  ],
+  "blocks": [
+    {
+        "type": "@theme",
+    }
+  ],
+  "presets": [
+    {
+      "name": "ZZ Modal",
+      "category": "Custom"
+    }
+  ]
+}
+{% endschema %}
+
+
+

package/snippets/zz-button.liquid

@@ -38,7 +38,7 @@ size：按钮尺寸
   
 {% if href %}
   {% if btn_type == 'link' %}
-    <a href="{{ href | default: '#' }}" class="zz-btn-link tw-text-[#378DDD] tw-inline-flex tw-items-center tw-text-[12px] lg:tw-text-[14px] tw-no-underline zz-btn-link-{{ btn_size }} {% if width == 'full' %} tw-w-full {% endif %} {{ class_name }}">
+    <a href="{{ href | default: '#' }}" {% if btn_id != blank %} id="{{ btn_id }}" {% endif %} class="zz-btn-link tw-text-[#378DDD] tw-inline-flex tw-items-center tw-text-[12px] lg:tw-text-[14px] tw-no-underline zz-btn-link-{{ btn_size }} {% if width == 'full' %} tw-w-full {% endif %} {{ class_name }}">
       <span class="zz-btn-text">{{ text }}</span>
       {% if postfix_icon %}<span class="zz-btn-icon" style="margin-left: {{ icon_left_margin }}px; margin-right: {{ icon_right_margin }}px;">
         {% render 'zz-icon', icon_name: postfix_icon, icon_size: icon_size %}
@@ -47,6 +47,7 @@ size：按钮尺寸
   {% else %}
     <a
       href="{{ href | default: '#' }}"
+      {% if btn_id != blank %} id="{{ btn_id }}" {% endif %}
       class="zz-btn zz-btn-{{ btn_type }} zz-btn-{{ btn_color }} zz-btn-{{ btn_size }} {% if width == 'full' %} tw-w-full {% endif %} {{ class_name }}"
       {% if backdrop_filter %}
         style="backdrop-filter: blur(12px);background: #FFFFFF0F;"
@@ -61,6 +62,8 @@ size：按钮尺寸
 
 <button
   class="zz-btn zz-btn-{{ btn_type }} zz-btn-{{ btn_color }} zz-btn-{{ btn_size }} {% if width == 'full' %} tw-w-full {% endif %} {{ width }} {{ class_name }}"
+  {% if modal_id != blank %} data-zz-modal-target="#{{ modal_id }}" {% endif %}
+  {% if btn_id != blank %} id="{{ btn_id }}" {% endif %}
   {% if backdrop_filter %}
     style="backdrop-filter: blur(12px);background: #FFFFFF0F;"
   {% endif %}