單擊其他div時關閉Modal-有解無憂

所以我不知道如何解決這個問題。我想讓它像這樣作業：如果你點擊一只爪子，模態就會打開，如果你點擊第二只爪子，爪子 1 的模態就會關閉。我必須在腳本中添加什么才能使其作業？現在，模態在當前活動模態的背景中打開。

<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>```

uj5u.com熱心網友回復：

我認為你試圖使事情過于復雜。這是您的代碼的修改版本，其行為符合預期：

<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>

請注意，您不需要添加兩次事件偵聽器，因為您正在查詢 DOM，querySelectorAll然后遍歷它們以添加事件偵聽器。此外，出于同樣的確切原因，您不需要添加所有功能，例如openModal兩次也不需要添加。

只是不要試圖讓它變得復雜。這很簡單。

uj5u.com熱心網友回復：

簡單的解決方案處理覆寫上的點擊事件，并停止從模態本身傳播點擊事件

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/497435.html

標籤：javascript html 模态对话

上一篇：更新的全域變數未傳遞到字串

下一篇：優化邏輯部分匹配2個陣列項