js实现点击弹出图片

帆 2024-04-29 0 阅读 评论
  <body>
  <a href="#" id="tanchuan1" onclick="sc()">点击显示图片</a>
  <div class="add-img" id="tanchuang2" style="display: none;">
  <div class="add-rim">
  <a id="add-close" href="javascript:closeDiv()">x</a>
  <img src="../css/图片/ImageRevealHover-master/img/1.jpg">
  </div>
  </div>
  </body>
  /* 遮罩层 */
  .add-img {
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 21%);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  }
  /* 弹窗内容 */
  .add-rim {
  width: 600px;
  height: 300px;
  background-color: whitesmoke;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;   /* 居中 */
  }
  /* 关闭按钮 */
  #add-close {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 33px;
  color: #bbbbbb;
  margin-top: -15px;
  text-decoration: none;
  }
  </style>
  <script>
  // 点击显示图片
  function sc(){
  document.getElementById('tanchuang2').style.display="block";
  }
  // 关闭按钮
  function closeDiv(){
  //当调用closeDiv函数时候,执行获取ID名为tanchuang2的标签 把它的style样式改为隐藏,
  document.getElementById('tanchuang2').style.display='none';
  }
  </script>


文章声明:以上内容(如有图片或视频亦包括在内)除非注明,否则均为时光荏苒原创文章,转载或复制请以超链接形式并注明出处。