js实现点击图片出现弹窗展示图片

1、需求

• 点击图片出现弹窗，内容为图片；
• 点击弹窗任意地方可关闭弹窗。

2、效果

3、代码

html代码

<div class="slider_container_full">
      <ul class="multicolumn-list_full" id="Slider-ul-full">
        <li class="grid__item_features_full">
          <div class="full_li">
            <img
              class="multicolumn-card__image_full"
              src="../assets/0001.jpeg"
              alt="Image Alt"
            />
          </div>
          <div class="features_text_full">
            <h3>海贼王</h3>
            <div class="rte">火拳艾斯</div>
          </div>
        </li>
        <li class="grid__item_features_full">
          <div class="full_li">
            <img
              class="multicolumn-card__image_full"
              src="../assets/0003.jpg"
              alt="Image Alt"
            />
          </div>
          <div class="features_text_full">
            <h3>海贼王</h3>
            <div class="rte">蒙奇·D·路飞</div>
          </div>
        </li>
        <!-- 更多LI标签 -->
      </ul>
    </div>

css代码

ul#Slider-ul-full {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .grid__item_features_full {
        width: 300px;
        list-style: none;
        text-align: center;
      }
      .full_li {
        text-align: center;
      }
      .multicolumn-card__image_full {
        width: 100%;
        height: auto;
      }
      .features_text_full h3 {
        margin: 0;
        padding: 0;
      }

      .features_text_full .rte {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .features_text_full .rte.expanded {
        -webkit-line-clamp: inherit; /* 设置为inherit以继承父元素的属性，或者直接移除这个属性 */
        overflow: visible;
        text-overflow: clip; /* 或者使用clip来避免省略号 */
      }

      .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 1000;
      }
      .modal-content {
        overflow: auto;
        text-align: center;
      }

      .modal-content img {
        max-width: 80%;
        height: auto;
      }

js代码

 document.addEventListener("DOMContentLoaded", function () {
        // 获取所有LI标签
        const lis = document.querySelectorAll(".full_li");

        // 创建模态框覆盖层
        const modalOverlay = document.createElement("div");
        modalOverlay.className = "modal-overlay";

        // 创建模态框内容
        const modalContent = document.createElement("div");
        modalContent.className = "modal-content";

        // 找到.rte元素并添加.expanded类来展开文本
        const rteElement = modalContent.querySelector(".rte");
        if (rteElement) {
          rteElement.classList.add("expanded");
        }

        // 为每个LI标签添加点击事件监听器
        lis.forEach((li) => {
          li.addEventListener("click", function () {
            // 设置模态框内容
            modalContent.innerHTML = li.innerHTML;

            // 添加模态框到覆盖层
            modalOverlay.appendChild(modalContent);

            // 显示覆盖层
            document.body.appendChild(modalOverlay);
            modalOverlay.style.display = "flex";

            // 点击覆盖层关闭模态框
            modalOverlay.addEventListener("click", function () {
              modalOverlay.style.display = "none";
              modalOverlay.removeChild(modalContent);
              document.body.removeChild(modalOverlay);
            });
          });
        });
      });