Primigenia 弹 框

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

Código 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>

resumen:

Ideas bomba cuadro de estilo

1. BTN botón disparador pop, de hecho, para controlar el display: none y desconexión de bloques problema

2. contenedor y el contenido dentro del pop incluidos. Hemos establecido que la anchura y la altura es de 100%, es decir, la capa de máscara cubre toda la página

3. modalbg posicionada de manera fija estilo pop, anchura y altura 100%, z-index background-color: rgb (0, 0, 0); opacidad: 0,3;

4. contenido a escribir el contenido, puede definir su propio