单击其他 div 时关闭 Modal

Question

So i don't have a clue how to work this out.所以我不知道如何解决这个问题。 I want to have it work like so: If you click on one paw the modal opens and if you click on the second paw the modal of paw 1 closes.我想让它像这样工作：如果你点击一只爪子，模态就会打开，如果你点击第二只爪子，爪子 1 的模态就会关闭。 What do i have to add to the script to make it work?我必须在脚本中添加什么才能使其工作？ Right now the modal opens in th ebackground of the curretn active modal.现在，模态在当前活动模态的背景中打开。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .infobox {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            transition: 200ms ease-in-out;
            z-index: 200;
            background-color: #D0D0CE;
            width: 500px;
            max-width: 80%;
        }

        .infobox.active {
            transform: translate(-50%, -50%) scale(1);
        }

        #overlay {
            position: fixed;
            opacity: 0;
            transition: 200ms ease-in-out;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, .7);
            pointer-events: none;
        }

        #overlay.active {
            opacity: 1;
            pointer-events: all;
        }

        .title {
            padding: 0 10px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .close-button {
            cursor: pointer;
            border: none;
            outline: none;
            background: none;
            font-size: 1.25rem;
            font-weight: bold;
        }

        .infoheadline {
            text-transform: uppercase;
            font-family: 'Roboto Condensed', sans-serif;
            padding-left: 5px;
        }

        .infotext {
            padding: 10px 15px;
            font-family: 'Roboto', sans-serif;
        }

        .linesmall {
            width: 20%;
            height: 5px;
            margin-left: 10px;
            background-color: #FABB00;
        }

        .paw {
            width: 42px;
            height: 42px;
            padding: 16px;
            z-index: 1;
            filter: drop-shadow(0px 0px 5px #ffffff);
        }
    </style>
</head>
<body>
                <!--Pfote 1 Start-->
                <div class="item one">
                    <div id="overlay"></div>
                    <input type="image" data-modal-target="#info1" src="https://media.visioneleven.com/JW/116_Nachhaltigkeit_Wiesen/image_assets/paw.png" alt="Pfote" class="paw">
                    <div id="info1" class="infobox eins">
                        <div class="title">
                            <h3 class="infoheadline">3.500 mal tierischer</h3>
                            <button data-close-button class="close-button">&times;</button>
                        </div>
                        <div class="linesmall"></div>
                        <p class="infotext">Wiesen bieten Lebensraum für rund 3.500 Tierarten – z. B. Vögel, Käfer, Spinnen, Heuschrecken, Schmetterlinge, Bienen, Hummeln ...</p>
                    </div>
                </div>
                <!--Pfote 1 Ende-->
    
                <!--Pfote 2 Start-->
                <div class="item two">
                    <div id="overlay"></div>
                    <input type="image" data-modal-target="#info2" src="https://media.visioneleven.com/JW/116_Nachhaltigkeit_Wiesen/image_assets/paw.png" alt="Pfote" class="paw">
                    <div id="info2" class="infobox zwei">
                        <div class="title">
                            <h3 class="infoheadline">588 Mrd. mal klimafreundlicher</h3>
                            <button data-close-button class="close-button">&times;</button>
                        </div>
                        <div class="linesmall"></div>
                        <p class="infotext">Allein in Deutschland speichern Wiesen ca. 588 Milliarden Tonnen CO<sub>2</sub> – und entziehen sie damit der Atmosphäre. (Zum Vergleich: Unsere Wälder speichern ca. 372 Mrd. t).</p>
                    </div>
                </div>
                <!--Pfote 2 Ende-->

                <script type="text/javascript">
        //Start Modal One
        const openModalButtonOne = document.querySelectorAll('[data-modal-target]')
        const closeModalButtonOne = document.querySelectorAll('[data-close-button]')
        const overlayOne = document.getElementById('overlay')

        openModalButtonOne.forEach(button => {
            button.addEventListener('click', () => {
                const info1 = document.querySelector(button.dataset.modalTarget)
                openModal(info1)
            })
        })

        overlayOne.addEventListener('click', () => {
            const info1 = document.querySelectorAll('.infobox.active')
            info1.forEach(info1 => {
                closeModal(info1)
            })
        })

        closeModalButtonOne.forEach(button => {
            button.addEventListener('click', () => {
                const info1 = button.closest('.infobox')
                closeModal(info1)
            })
        })

        function openModal(info1) {
            if (info1 == null) return
            info1.classList.add('active')
            overlayOne.classList.add('active')
        }

        function closeModal(info1) {
            if (info1 == null) return
            info1.classList.remove('active')
            overlayOne.classList.remove('active')
        }

        //Start Modal Two
        const openModalButtonTwo = document.querySelectorAll('[data-modal-target]')
        const closeModalButtonTwo = document.querySelectorAll('[data-close-button]')
        const overlayTwo = document.getElementById('overlay')

        openModalButtonTwo.forEach(button => {
            button.addEventListener('click', () => {
                const info2 = document.querySelector(button.dataset.modalTarget)
                openModal(info2)
            })
        })

        overlayTwo.addEventListener('click', () => {
            const info2 = document.querySelectorAll('.infobox.active')
            info2.forEach(info2 => {
                closeModal(info2)
            })
        })

        closeModalButtonTwo.forEach(button => {
            button.addEventListener('click', () => {
                const info2 = button.closest('.infobox')
                closeModal(info2)
            })
        })

        function openModal(info2) {
            if (info2 == null) return
            info2.classList.add('active')
            overlayTwo.classList.add('active')
        }

        function closeModal(info2) {
            if (info2 == null) return
            info2.classList.remove('active')
            overlayTwo.classList.remove('active')
        }
 </script>
</body>
</html>```

Answer 1

I think you tried to overcomplicate the stuff.我认为你试图使事情过于复杂。 Here's a modified version of your code that behaves as expected:这是您的代码的修改版本，其行为符合预期：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      .infobox {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        transition: 200ms ease-in-out;
        z-index: 200;
        background-color: #d0d0ce;
        width: 500px;
        max-width: 80%;
      }

      .infobox.active {
        transform: translate(-50%, -50%) scale(1);
      }

      #overlay {
        position: fixed;
        opacity: 0;
        transition: 200ms ease-in-out;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.7);
        pointer-events: none;
      }

      #overlay.active {
        opacity: 1;
        pointer-events: all;
      }

      .title {
        padding: 0 10px 0 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .close-button {
        cursor: pointer;
        border: none;
        outline: none;
        background: none;
        font-size: 1.25rem;
        font-weight: bold;
      }

      .infoheadline {
        text-transform: uppercase;
        font-family: "Roboto Condensed", sans-serif;
        padding-left: 5px;
      }

      .infotext {
        padding: 10px 15px;
        font-family: "Roboto", sans-serif;
      }

      .linesmall {
        width: 20%;
        height: 5px;
        margin-left: 10px;
        background-color: #fabb00;
      }

      .paw {
        width: 42px;
        height: 42px;
        padding: 16px;
        z-index: 1;
        filter: drop-shadow(0px 0px 5px #ffffff);
      }
    </style>
  </head>
  <body>
    <div id="overlay"></div>

    <!--Pfote 1 Start-->
    <div class="item one">
      <input
        type="image"
        data-modal-target="#info1"
        src="https://media.visioneleven.com/JW/116_Nachhaltigkeit_Wiesen/image_assets/paw.png"
        alt="Pfote"
        class="paw"
      />
      <div id="info1" class="infobox eins">
        <div class="title">
          <h3 class="infoheadline">3.500 mal tierischer</h3>
          <button data-close-button class="close-button">&times;</button>
        </div>
        <div class="linesmall"></div>
        <p class="infotext">
          Wiesen bieten Lebensraum für rund 3.500 Tierarten – z. B. Vögel,
          Käfer, Spinnen, Heuschrecken, Schmetterlinge, Bienen, Hummeln ...
        </p>
      </div>
    </div>
    <!--Pfote 1 Ende-->

    <!--Pfote 2 Start-->
    <div class="item two">
      <input
        type="image"
        data-modal-target="#info2"
        src="https://media.visioneleven.com/JW/116_Nachhaltigkeit_Wiesen/image_assets/paw.png"
        alt="Pfote"
        class="paw"
      />
      <div id="info2" class="infobox zwei">
        <div class="title">
          <h3 class="infoheadline">588 Mrd. mal klimafreundlicher</h3>
          <button data-close-button class="close-button">&times;</button>
        </div>
        <div class="linesmall"></div>
        <p class="infotext">
          Allein in Deutschland speichern Wiesen ca. 588 Milliarden Tonnen
          CO<sub>2</sub> – und entziehen sie damit der Atmosphäre. (Zum
          Vergleich: Unsere Wälder speichern ca. 372 Mrd. t).
        </p>
      </div>
    </div>
    <!--Pfote 2 Ende-->

    <script type="text/javascript">
      //Start Modal One
      const openModalButtons = document.querySelectorAll("[data-modal-target]");
      const closeModalButtons = document.querySelectorAll(
        "[data-close-button]"
      );
      const overlay = document.querySelector("#overlay");

      const closeActiveModals = () => {
        const info = document.querySelectorAll(".infobox.active");
        info.forEach((info) => {
          closeModal(info);
        });
      };

      openModalButtons.forEach((button) => {
        button.addEventListener("click", () => {
          closeActiveModals();
          const info = document.querySelector(button.dataset.modalTarget);
          openModal(info);
        });
      });

      overlay.addEventListener("click", closeActiveModals);

      closeModalButtons.forEach((button) => {
        button.addEventListener("click", () => {
          const info = button.closest(".infobox");
          closeModal(info);
        });
      });

      function openModal(info) {
        if (info == null) return;
        info.classList.add("active");
        overlay.classList.add("active");
      }

      function closeModal(info) {
        if (info == null) return;
        info.classList.remove("active");
        overlay.classList.remove("active");
      }
    </script>
  </body>
</html>

Note that you don't need to add event listeners twice as you're querying the DOM with querySelectorAll and then iterating through them to add event listeners.请注意，您不需要添加两次事件侦听器，因为您使用querySelectorAll查询 DOM，然后遍历它们以添加事件侦听器。 Also, for the same exact reason, you don't need to add all of the functions such as openModal twice neither.此外，出于同样的确切原因，您也不需要将openModal等所有功能都添加两次。

Just don't try to make it complicated.只是不要试图让它变得复杂。 It's very simple.这很简单。

Answer 2

简单的解决方案处理覆盖上的点击事件，并停止从模态本身传播点击事件

单击其他 div 时关闭 Modal

问题描述

2 个解决方案

解决方案1
2 已采纳 2022-06-29 10:11:10

解决方案2
-1 2022-06-29 09:28:13

单击其他 div 时关闭 Modal

问题描述

2 个解决方案

解决方案1 2 已采纳 2022-06-29 10:11:10

解决方案2 -1 2022-06-29 09:28:13

解决方案1
2 已采纳 2022-06-29 10:11:10

解决方案2
-1 2022-06-29 09:28:13