原生js-弹窗，可复用性写法

元子网页开发（YYuanDot）

已于 2024-11-25 09:54:19 修改

阅读量144

点赞数 1

文章标签： javascript 前端开发语言

于 2024-11-22 15:18:09 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_54368936/article/details/143974647

版权

贴个主要逻辑写法

<button
            type="submit"
            class="btn-submit"
            data-bs-toggle="modal"
            data-toggle="newsDescModalSuccess"
            data-bs-target="#newsDescModalSuccess"
            data-desc-no="1"
          >
            Submit
          </button>
弹窗部分
    <!-- submit弹窗成功文字 开始 -->
    <div
      class="modal fade"
      id="newsDescModalSuccess"
      tabindex="-1"
      aria-labelledby="newsDescModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
          <div class="modal-body">
            <p id="newsDescPSuccess">dd1</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗正文文字 结束 -->

js部分
// 点击弹窗文字
      // 对应正文内容数据
      var newsDescs = {
        1: "submit successful ",
      };
      var newsDescP = document.getElementById("newsDescPSuccess");
      function openNewsDescModal() {
        var trigger = $("body").find('[data-toggle="newsDescModalSuccess"]');
        trigger.click(function () {
          var theModal = $(this).data("target"),
            text = $(this).attr("data-desc-no");
          newsDescP.innerHTML = newsDescs[text];
        });
      }
      openNewsDescModal();

主要就是先设置类型，然后data-desc-no对应数组的序号，然后进行id获取渲染内容