原生弹框

1.styleスタイル

    <style>
        .container {
            width: 100%;
            height: 100%;
            display: none;
        }

        .modalbg {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 100;
            background-color: rgb(0, 0, 0);
            opacity: 0.3;
        }
    </style>

2.html

    <button id="modal">点击弹窗</button>
  <div class="container" id="modalContent">
      <div class="modalbg">
      </div>
      <div class="content"
          style=" width: 300px;height: 200px; z-index: 110;position: relative; left: 50%;top: 50%;transform: translate(-50%); background-color: #fff;">
          <div
              style="background-color: #F8F8F8; padding: 10px;display: flex; align-items: center;justify-content: space-between;">
              <span>详情弹框</span>
              <img src="./images/u291.svg" alt="" style="width: 16px;height: 16px; cursor: pointer;" id="close">
          </div>
          <div class="content" style="padding: 10px;">
              详情内容 
              <!-- <img src="../../图片/20141101200820_imLnw.jpeg" style="width: 500px;height: 500px;"  alt=""> -->
          </div>
      </div>
  </div>

コード3.js

<script src="../jq-exercise/jquery.js"></script>
<script>
 $("#modal").click(function () {
     $("#modalContent").css("display", "block");
 })
 $("#close").click(function () {
     $("#modalContent").css("display", "none");
 })
 var a = [1,2,3];
 var b =[1,2,3];
 console.log(a==b);
</script>

要約：

爆弾ボックススタイルのアイデア

1. BTNトリガーボタンのポップは、実際には、表示を制御しますなしとブロックスイッチング問題

ポップ内側2.コンテナと内容が含まれています。私たちは、幅に設定し、高さは100％、である、マスク層は、ページ全体をカバー

;不透明RGB（0、0、0）：3. modalbgが固定ポップスタイル、幅と高さ100％、z屈折率の背景色配置0.3。

書き込み内容4.コンテンツは、あなた自身を定義することができます