背景固定と、背景固定しないモーダルをページ内に設置したい【Micromodal.js】

<main class="main">
      <ul class="list">
        <li class="list-item">

          <!-- 内容・開くボタン -->
          <button type="button" class="popup__open-button" data-micromodal-trigger="popup-1" aria-label="内容を確認する">
            表示ボタン01
          </button>

          <!-- 表示切り替え -->
          <div id="popup-1" class="popup" aria-hidden="true">

            <!-- 幕 -->
            <div class="popup__overlay" tabindex="-1" data-micromodal-close></div>

            <!-- 内容 -->
            <div class="popup__container" aria-modal="true" aria-labelledby="popup-1-title" role="dialog">
              <h2 id="popup-1-title" class="popup__title">
                タイトル
              </h2>
              <div id="popup-1-content" class="popup__text">
                テキスト
              </div>

              <!-- 閉じるボタン -->
              <div class="button__wrap">
                <button type="button" class="popup__close-button" data-micromodal-close aria-label="内容を閉じる">
                  閉じる
                </button>
              </div>
            </div>

          </div>
        </li>

        <!-- /* 以下、li 繰り返し ------------------------------- */ -->

</ul>
</main>

/* モーダル表示・切り替え ------------------------------- */
.popup {
  display: none;

  &.is-open {
    display: block;
  }
}

/* ポップアップ後の背景の幕・切り替え ------------------------------- */
.popup[aria-hidden="false"] .popup__overlay {
  opacity: 1;
  visibility: visible;
}

/* モーダルの中身・切り替え ------------------------------- */
.popup[aria-hidden="false"] .popup__container {
  animation: fadeIn .5s;
}

.popup[aria-hidden="true"] .popup__container {
  animation: fadeOut .5s;
}

※ 背景固定用スクリプト[ backfaceFixed ]は省略しています。
（過去記事を参照ください https://pazfinder.link/blog-micromodal/）


/* ドロワーGナビメニュー開閉 ------------------------------- */
const drawer_01 = document.getElementById('drawer-1');
const drawer_open_button = document.getElementById('js_drawer_button_open');
const popup = document.getElementsByClassName('popup');

// ドロワーGナビボタンをクリックされた時に〜
  drawer_open_button.addEventListener("click", () => {
      
// もしも、モーダルコンテンツが開いていたら閉じる（閉じてからGナビを開かないと不具合が起きる）
      for (let i = 0; i < popup.length; i++) {
      if (popup[i].classList.contains('is-open')) {
        const popup_id = popup[i].getAttribute('id');
        MicroModal.close(popup_id);
      }
    };

// ドロワーGナビの開閉処理（過去記事と同じ）
    if (!drawer_01.classList.contains("is-open")) {
      MicroModal.show("drawer-1", {
        disableScroll: true,
        awaitOpenAnimation: true,
        awaitCloseAnimation: true,

        onShow: (modal) => {
          drawer_open_button.classList.add("is-open");
          drawer_open_button.ariaExpanded = true; // スクリーンリーダーに伝える役割

          backfaceFixed(true); // 背景固定する

          console.info(`${modal.id} is shown`); // Optional
        },

        onClose: (modal) => {
          drawer_open_button.classList.remove("is-open");
          drawer_open_button.ariaExpanded = false; // スクリーンリーダーに伝える役割

          backfaceFixed(false); // 背景固定しない

          console.info(`${modal.id} is hidden`); // Optional
        }
      });
    } else {
      MicroModal.close("drawer-1")
    }
  });


/* モーダルコンテンツ用 ------------------------------- */

// モーダル開くボタンのクラス名
  const popup_open_btn = document.getElementsByClassName('popup__open-button');

  for (let i = 0; i < popup_open_btn.length; i++) {

// モーダル開くボタンがクリックされた時に〜
    popup_open_btn[i].addEventListener('click', function () {

// クリックされた要素の、隣にある兄弟要素の、id を取得
      const popup_id = this.nextElementSibling.getAttribute('id');

// 取得した id に対して Micromodalを開く
      MicroModal.show(popup_id, {
        disableScroll: false,
        awaitOpenAnimation: true,
        awaitCloseAnimation: true,
        onShow: (modal) => {
          console.info(`${modal.id} is shown`); // Optional
        },
        onClose: (modal) => {
          console.info(`${modal.id} is hidden`); // Optional
        },
      });
    });
  };