PHPackages                             craftsnippets/modal-component - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. craftsnippets/modal-component

ActiveCraft-plugin[Utility & Helpers](/categories/utility)

craftsnippets/modal-component
=============================

Modal component plugin for Craft CMS

2.0.1(1y ago)0144[1 issues](https://github.com/craft-snippets/Craft-modal-component/issues)MITPHP

Since Jun 14Pushed 1y ago1 watchersCompare

[ Source](https://github.com/craft-snippets/Craft-modal-component)[ Packagist](https://packagist.org/packages/craftsnippets/modal-component)[ RSS](/packages/craftsnippets-modal-component/feed)WikiDiscussions craft5 Synced 4w ago

READMEChangelog (4)Dependencies (1)Versions (6)Used By (0)

Modal component plugin for Craft CMS 5.x
========================================

[](#modal-component-plugin-for-craft-cms-5x)

[![Screenshot](resources/img/modal.png)](resources/img/modal.png)

Requirements
------------

[](#requirements)

This plugin requires Craft CMS 4.0.0r later.

Installation
------------

[](#installation)

To install the plugin, follow these instructions.

1. Open your terminal and go to your Craft project:

    ```
     cd /path/to/project

    ```
2. Then tell Composer to load the plugin:

    ```
     composer require craftsnippets/modal-component

    ```
3. In the Control Panel, go to Settings → Plugins and click the “Install” button for Modal component.

Modal component Overview
------------------------

[](#modal-component-overview)

The modal component plugin provides you with a very simplistic and robust modal template. It does not make any assumptions about modal content and provides very basic styling which can be easily adjusted to your site template.

Modals created by this plugin integrate seamlessly with Craft templates and provide basic functionality like trapping focus inside modal or proper aria tags for accessibility. Beyond that, you can customize your modal in any way you want.

How to use
----------

[](#how-to-use)

To use modal, you just need to use embed Twig tag with the template provided by plugin:

```
{% 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 %}

```

You can show or hide the modal in one of the two ways: using the button, or using the JS method.

To create a button that shows modal, you need to add the `data-a11y-dialog-show` attribute to the button and set it to the ID you set in the `modalId` variable passed to the modal component:

```
open modal

```

To create a button that hides modal, you need to add the `data-a11y-dialog-hide` attribute to the button. If you do not set it to any ID, it will close any modal currently shown.

To use JS function, you need to grab DOM object of modal contaner by using modal ID and use `_dialog.show()` or `_dialog.hide()` method:

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

```

You can also attach behavior to modal `show` and `hide` events:

```
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 styles
----------

[](#css-styles)

The modal component plugin provides two CSS files - one with very basic functionality responsible for showing and hiding modal and one with the default theme. You can disable either of them by creating a `config/dialog-component.php` file and setting one of these two variables to `false`:

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

```

a11y-dialog library
-------------------

[](#a11y-dialog-library)

Modal component uses excellent [a11y-dialog](https://a11y-dialog.netlify.app/) library for its internal functionality. I recommend reading a11y-dialog documentation if you want to learn more and maybe customize your modal behavior further.

Credits
-------

[](#credits)

Brought to you by [Piotr Pogorzelski](http://craftsnippets.com/)

Plugin icon by [Vaadin Icons](https://iconscout.com/free-icon/modal-10).

###  Health Score

30

—

LowBetter than 64% of packages

Maintenance37

Infrequent updates — may be unmaintained

Popularity13

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity51

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~253 days

Total

4

Last Release

664d ago

Major Versions

1.0.2 → 2.0.12024-07-14

### Community

Maintainers

![](https://www.gravatar.com/avatar/c29f59397bc9cfcc85bb0d6350d68c0d29957c5b3bd1c9f0b7c804a1c3c5df4f?d=identicon)[piotrpog](/maintainers/piotrpog)

---

Top Contributors

[![piotrpog](https://avatars.githubusercontent.com/u/42622545?v=4)](https://github.com/piotrpog "piotrpog (9 commits)")

---

Tags

cmsmodalCraftcraftcmscraft-pluginmodal component

### Embed Badge

![Health badge](/badges/craftsnippets-modal-component/health.svg)

```
[![Health](https://phpackages.com/badges/craftsnippets-modal-component/health.svg)](https://phpackages.com/packages/craftsnippets-modal-component)
```

###  Alternatives

[verbb/navigation

Create navigation menus for your site.

90683.7k17](/packages/verbb-navigation)[verbb/formie

The most user-friendly forms plugin for Craft.

101372.9k40](/packages/verbb-formie)[verbb/comments

Add comments to your site.

13753.1k](/packages/verbb-comments)[verbb/tablemaker

Create customizable and user-defined table fields.

40168.8k1](/packages/verbb-tablemaker)[supercool/tablemaker

Create customizable and user-defined table fields.

40141.7k](/packages/supercool-tablemaker)[pennebaker/craft-architect

CraftCMS plugin to generate content models from JSON/YAML data.

72148.5k5](/packages/pennebaker-craft-architect)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)