README

要求

此插件需要 Craft CMS 4.0.0r 或更高版本。

安装

要安装此插件，请按照以下说明操作。

1. 打开您的终端并转到您的 Craft 项目

    cd /path/to/project
   

2. 然后让 Composer 加载插件

    composer require craftsnippets/modal-component
   

3. 在控制面板中，转到设置 → 插件，然后点击“安装”按钮安装模态组件。

模态组件概述

模态组件插件为您提供一个非常简单且强大的模态模板。它不对模态内容做出任何假设，并提供非常基础的样式，可以轻松调整到您的网站模板。

由此插件创建的模态与 Craft 模板无缝集成，提供基本功能，如聚焦于模态内部或为可访问性提供正确的 aria 标签。除此之外，您可以按任何方式自定义您的模态。

如何使用

要使用模态，您只需使用插件提供的模板的嵌入 Twig 标签。

{% embed 'snippets-modal/modal' with {
    modalId: 'my-modal-id',
} %}

{% block content %}
Your modal content - any HTML can go there.
{% endblock %}

{% block header %}
Modal header - optional.
{% endblock %}

{% endembed %}

您可以通过两种方式之一显示或隐藏模态：使用按钮或使用 JS 方法。

要创建显示模态的按钮，您需要将 data-a11y-dialog-show 属性添加到按钮，并将其设置为传递给模态组件的 modalId 变量中设置的 ID。

<button data-a11y-dialog-show="my-modal-id">open modal</button>

要创建隐藏模态的按钮，您需要将 data-a11y-dialog-hide 属性添加到按钮。如果不设置任何 ID，它将关闭当前显示的任何模态。

要使用 JS 函数，您需要通过模态 ID 获取 DOM 对象的模态容器，并使用 _dialog.show() 或 _dialog.hide() 方法。

document.getElementById('my-modal-id')._dialog.show()
document.getElementById('my-modal-id')._dialog.hide()

您还可以将行为附加到模态的 show 和 hide 事件。

document.getElementById('my-modal-id')._dialog.on('show', function (event) {
  // Do something when modal gets shown
})

document.getElementById('my-modal-id')._dialog.on('hide', function (event) {
  // Do something when modal gets hidden
})

CSS 样式

模态组件插件提供两个 CSS 文件——一个负责显示和隐藏模态的非常基础的功能，另一个是默认主题。您可以通过创建一个 config/dialog-component.php 文件并设置这两个变量之一为 false 来禁用它们中的任何一个。

public $useBaseCss = false;
public $useDefaultTheme = false;

a11y-dialog 库

模态组件使用优秀的 a11y-dialog 库来实现其内部功能。如果您想了解更多信息并可能进一步自定义模态行为，建议阅读 a11y-dialog 文档。

由 Piotr Pogorzelski 提供