モーダルを表示させることができない(Micromodal.js)

実現したいこと

「+タグ一覧」押下でモーダル表示させたい。
なぜモーダルが表示されないのかの原因を探っています。
🔽実現したい「+タグ一覧」の模写元サイト
https://www.delights-home.jp/works
🔽モーダルの参考サイト
https://www.evoworx.co.jp/blog/accessibility-modal/

前提

Micromodal.jsを開いてnode.jsをインストールした上でnpmをターミナルに入力済です。

HTML(wordpress)

<div class="arworks_alltag"> <a href="" class="arworks_alllink" data-micromodal-trigger="modal-1"> <span class="material-icons arworks_plus">add_circle</span>タグ一覧</a> </div> </nav> <!-- ここからモーダルエリア --> <div class="modal micromodal-slide" id="modal-1" aria-hidden="true"> <div class="modal__overlay" tabindex="-1" data-micromodal-close> <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title"> <header class="modal__header"> <h2 class="modal__title" id="modal-1-title">contents</h2> <button type="button" class="modal__close" aria-label="Close modal" data-micromodal-close></button> </header> <main class="modal__content" id="modal-1-content"> <p> I love three.js I love three.js<br> I love three.js I love three.js<br> I love three.js I love three.js<br> I love three.js I love three.js<br> I love three.js I love three.js<br> </p> </main> </div> </div> </div> <!-- ここまでモーダルエリア -->

CSS

.arworks .archive_type .arworks_tag { font-size: 17px; margin-bottom: 0; display: flex; justify-content:center; align-items: center; background-color: #B6993D; color: #fff; font-family: "Noto Sans JP", sans-serif; } .arworks .archive_type .arworks_tablist { display: flex; justify-items: center; flex-wrap: wrap; overflow: hidden; gap: 10px; margin-bottom: 0; padding-left: 0; align-items: center; line-height: 2; margin-top: 2px; } .arworks .archive_type .arworks_tablist .tab-title { display: flex; align-items: center; font-family: "Noto Sans JP", sans-serif; background-color: #fff; color: #433f37; } .arworks .archive_type .arworks_tablist .tab-title a { font-size: 14px; align-items: center; font-family: "Noto Sans JP", sans-serif; color: #433f37; padding: 2px 14px; display: block; text-align: center; } .arworks .archive_type .arworks_tablist .tab-title a:hover { background-color: #B6993D; color: #fff; transition: 0.2s; } .arworks .arworks_alltag { display: flex; justify-items: center; } .arworks .arworks_alltag .arworks_alllink { display: flex; align-items: center; font-size: 14px; color: #433f37; } .arworks .arworks_alltag .arworks_alllink:hover { color:#999; transition: 0.2s; } .material-icons.arworks_plus { font-size: 19px; /* サイズの指定 */ } .class::before { font-family: 'Material Icons'; content: 'e8dc'; } /* Animation */ @keyframes mmfadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes mmfadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes mmslideIn { from { transform: translateY(10%); } to { transform: translateY(0); } } @keyframes mmslideOut { from { transform: translateY(0); } to { transform: translateY(-10%); } } .micromodal-slide { display: none; } .micromodal-slide.is-open { display: block; } .micromodal-slide[aria-hidden="false"] .modal__overlay { animation: mmfadeIn 0.8s cubic-bezier(0.34, 0.07, 0.095, 0.995); } .micromodal-slide[aria-hidden="false"] .modal__container { animation: mmslideIn 0.8s cubic-bezier(0.34, 0.07, 0.095, 0.995); } .micromodal-slide[aria-hidden="true"] .modal__overlay { animation: mmfadeOut 0.8s cubic-bezier(0.34, 0.07, 0.095, 0.995); } .micromodal-slide[aria-hidden="true"] .modal__container { animation: mmslideOut 0.8s cubic-bezier(0.34, 0.07, 0.095, 0.995); } .micromodal-slide .modal__container, .micromodal-slide .modal__overlay { will-change: transform; }

jQuery

import MicroModal from 'micromodal' // MicroModal.init()で初期化 MicroModal.init({ // オプション // 背景をスクロールさせない disableScroll: true });

ここにより詳細な情報を記載してください。