Home>

I have a pop-up implemented on my existing site, but I would like to implement another pop-up of the same format.
site
↑ If i click on this "It was published in the Mid-Japan Economist",
Pop-up
↑ A pop-up like this will be displayed.
This time, "Reagent Management System Development" was published in the "Chubu Keizai Shimbun" below. I want to display a similar pop-up when I click on the place.
I don't understand js at all. jquery is a little understandable.
I understand html and css well.

It's not a site I made. I'm trying to download a file using ftp and implement a new pop-up.
There was only one js file called main.bundle.js on the server, but I don't know where and how to implement a new popup. I will write the code, so please tell me where and how to change or add it to implement it.

Corresponding source code
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 was a very long code. Among them, the part with the class name described in html that seems to be related to the pop-up is excerpted and described above.

<section>                       <span>MEDIA</span><span>Media</span>           <ul>            <li><span>2020.01.07</span><span>It was published in the Mid-Japan Economist.</span></li>            <li><span>2020.11.12</span><span>"Reagent Management System Development" was published in the Mid-Japan Economist.</span></li>          </ul>                  </section>    </main>                                                           <span><i></i><span>Close</span></span>                                                                                                       <span><i></i><span>Close</span></span>                          


html added the li element of the text part from the original code.
Also, I thought that a modal display part was necessary, so I added the following div with the class data-modal-id = "2" from the original code. Originally there was only code in the div with the class data-modal-id = "1".

What I tried

Do a little research and replace the querySelector ('[data-modal-id = "1"]') part with querySelectorAll ('[data-modal-id = "1"]], I wondered if it would work as [data-modal-id = "2"]'), but it didn't work.

Also, duplicate only the above js part, add it below, and add the querySelector ('[data-modal-id = ""]') part to the querySelector ('[data-modal-id = "2" " ]') I thought it would work, but it didn't work.

Supplementary information (FW/tool version, etc.)

I hardly understand js. Excuse me, please tell me how I can implement the popup.
I look forward to working with you.

  • Answer # 1

    It's a guess because it can't be reproduced with the presented code alone, but why not try the following?
    First,

    // 6th line
    n = document.querySelectorAll (".js-open-modal"), // Add All


    And the following part

        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)
          }));


    Change as below

      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)
        }));


    The HTML will also change slightly.


    Enter the information of the image to be displayed modally as follows. (Same for the second link)


    Both modal structuresscr = "..."It seems to be common except for the part of, so make only one and use JS.imgMake it a specification to rewrite the src attribute of.