ポップアップを実装したい

Question

前提・実現したいこと

既存のサイトにポップアップが実装されているのですが、追加でもう一つ同じ形式のポップアップを実装したいです。
サイト
↑この「中部経済新聞に掲載されました。」というところをクリックすると、
ポップアップ
↑このようなポップアップが表示されます。
今回この下の「中部経済新聞に「試薬管理システム開発」が掲載されました。」というところをクリックすると同じようなポップアップが表示されるようにしたいです。
jsは全然わかりません。jqueryは少しわかります。
html,cssはよくわかります。

発生している問題・エラーメッセージ

自分が作ったサイトではないものです。ftpを使ってファイルをダウンロードしてきて、新たにポップアップを実装しようとしています。
jsのファイルはmain.bundle.jsというものがひとつだけサーバーにありましたが、どこをどう変えれば新たにポップアップを実装できるのかわかりません。コードを記載しますので、どこをどう変えたり追加したりすれば実装できるかを教えて頂きたいです。

該当のソースコード

function n() {
    ! function () {
      var t = document.documentElement,
        e = window.scrollY,
        r = document.querySelector(".modal"),
        n = document.querySelector(".js-open-modal"),
        i = document.querySelector(".js-close-modal");
      window.addEventListener("scroll", (function () {})), n.addEventListener("click", (function () {
        var r = document.querySelector('[data-modal-id="1"]');
        e = window.scrollY, r.classList.add("is-show"), t.classList.add("is-open-modal")
      })), i.addEventListener("click", (function () {
        r.classList.remove("is-show"), t.classList.remove("is-open-modal"), window.scrollTo(0, e)
      }));
      var s = r.querySelector(".js-scrollable"),
        o = null;
      s.addEventListener("touchstart", (function (t) {
        t.targetTouches.length > 1 || (o = t.targetTouches[0].clientY)
      }), !1), s.addEventListener("touchmove", (function (t) {
        if (!(t.targetTouches.length > 1)) {
          var e, r = t.targetTouches[0].clientY - o;
          if (0 === s.scrollTop && r > 0) t.preventDefault();
          else(e = s).scrollHeight - e.scrollTop <= e.clientHeight && r < 0 && t.preventDefault()
        }
      }), !1)
    }()
  }

javascriptはすごく長いコードでした。その中でhtmlに記載されているクラス名のついた、ポップアップに関係していると思われる部分を抜粋して上記に記載しました。

<section class="area-media">
            <div class="content-frame">
              <h2 class="title"><span class="main">MEDIA</span><span class="sub">メディア</span></h2>
              <ul class="list">
                <li class="list__item"><a class="link js-open-modal" data-target-modal="1"><span class="meta">2020.01.07</span><span class="title">中部経済新聞に掲載されました。</span></a></li>
                <li class="list__item"><a class="link js-open-modal" data-target-modal="2"><span class="meta">2020.11.12</span><span class="title">中部経済新聞に「試薬管理システム開発」が掲載されました。</span></a></li>
              </ul>
            </div>
          </section>
        </main>
        <div class="modal" data-modal-id="1">
          <div class="modal__inner js-scrollable">
            <div class="modal__content">
              <div class="block-article">
                <div class="box-image"><img class="img" src="../assets/img/company/img_1.png"></div>
              </div><span class="js-close-modal"><i class="effect"></i><span class="text">閉じる</span></span>
            </div>
          </div>
        </div>
        <div class="modal" data-modal-id="2">
          <div class="modal__inner js-scrollable">
            <div class="modal__content">
              <div class="block-article">
                <div class="box-image"><img class="img" src="../assets/img/company/201124_zisseki.jpg"></div>
              </div><span class="js-close-modal"><i class="effect"></i><span class="text">閉じる</span></span>
            </div>
          </div>
        </div>

htmlはテキスト部分のli要素をもともとのコードから追記しました。
また、モーダルの表示部分が新たに必要だと思い、data-modal-id="2"というクラスのついたdiv以下をもともとのコードから追記しました。もともとはdata-modal-id="1"というクラスのついたdiv内のコードしかありませんでした。

試したこと

ちょっと調べて、querySelector('[data-modal-id="1"]')の部分をquerySelectorAll('[data-modal-id="1"],[data-modal-id="2"]')として動くかなと思いやってみましたがだめでした。

また、上記のjsの部分だけ全体を複製して、下に追記し、querySelector('[data-modal-id=""]')の部分をquerySelector('[data-modal-id="2"]')としたら動くかなと思いましたが、だめでした。

補足情報（FW/ツールのバージョンなど）

jsはほとんどわかりません。すみませんどうしたらポップアップを実装できるか教えてください。
よろしくお願い致します。

Comments

[kei344]

teratailでは画像もアップできますので、ご自信で所持されている画像であればそちらを使用されてはいかがでしょうか。（画像として質問文に表示されますし）

Answer 1

提示されたコードだけでは再現できないので推測ですが、以下のようにしてみてはいかがでしょうか。
まず、

// 6行目
n = document.querySelectorAll(".js-open-modal"),    // Allを追加

そして以下の部分を

      window.addEventListener("scroll", (function () {})), n.addEventListener("click", (function () {
        var r = document.querySelector('[data-modal-id="1"]');
        e = window.scrollY, r.classList.add("is-show"), t.classList.add("is-open-modal")
      })), i.addEventListener("click", (function () {
        r.classList.remove("is-show"), t.classList.remove("is-open-modal"), window.scrollTo(0, e)
      }));

下記のように変更

    window.addEventListener("scroll", (function () {})),
    n.forEach(function(element, index, array){
        element.addEventListener('click',(function () {
            var r = document.querySelector('[data-modal-id="1"]');
            var src = element.dataset.src;
            r.querySelector('img').setAttribute("src", src);
            e = window.scrollY, r.classList.add("is-show"), t.classList.add("is-open-modal")
        }))
    }), i.addEventListener("click", (function () {
        r.classList.remove("is-show"), t.classList.remove("is-open-modal"), window.scrollTo(0, e)
    }));

HTMLも若干変更します。

<a class="link js-open-modal" data-target-modal="1">

上記に以下のようにモーダルに表示する画像の情報を入れます。（2つ目のリンクも同様に）

<a class="link js-open-modal" data-target-modal="1" data-src="../assets/img/company/img_1.png">

モーダルの構造は2つともsrc="..."の部分以外は共通のようなので、一つだけにして、JSで.imgのsrc属性を書き換える仕様にします。

Comments

[shunsaku87]

丁寧に読んでいただき、しっかり回答いただき、本当にありがとうございます。
無事実装できました。
心から感謝いたします。
本当にありがとうございました。