点击a标签弹窗iframe窗口实例demo

最新推荐文章于 2024-08-05 17:22:58 发布

于飞SEO

最新推荐文章于 2024-08-05 17:22:58 发布

阅读量2k

点赞数

分类专栏：站长技术交流

本文链接：https://blog.csdn.net/q906270629/article/details/123508975

版权

html css javascript

站长技术交流专栏收录该内容

235 篇文章 10 订阅

订阅专栏

简介

点击a标签弹窗iframe窗口实例demo

本代码来源网络，亲测可用，代码简洁高效！

代码实例

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .shadow {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      background: rgba(0,0,0,.3);
      transition: all .3s;
      z-index: -1;
    }
    .shadow.show {
      z-index: 1;
      opacity: 1;
    }
    .shadow.show .model {
      transform: translate(-50%, -50%);
    }
    .model {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -60%);
      width: 300px;
      background: #fff;
      border-radius: 6px;
      transition: all .3s;
    }
    .model .tit {
      display: flex;
      line-height: 30px;
      padding: 10px;
      border-bottom: 1px solid #ccc;
    }
    .model .tit .close {
      margin-left: auto;
      cursor: pointer;
    }
    .model .content {
      padding: 10px;
    }
  </style>
</head>
<body>
  <a href="void:;" id="btn">按钮</a>
  <div class="shadow" id="shadow">
    <div class="model">
      <div class="tit">
        我是弹窗标题
        <div class="close" id="model-close">关闭</div>
      </div>
      
        <iframe class="content" width="50%" align="center" height="300"frameborder="0" scrolling="no" src="http://www.yfi6.com"></iframe> 
      
    </div>
  </div>
  <script>
    let btn = document.getElementById('btn');
    let shadow = document.getElementById('shadow');
    btn.addEventListener('click', function(e) {
      shadow.className = 'shadow show'
      return false
    }, false)
    shadow.addEventListener('click', function(e) {
      let target = e.target;
      let _class = target.className;
      if(_class.includes('shadow') || _class.includes('close')) {
        shadow.className = 'shadow'
      }
      return false
    }, false)
  </script>
</body>
</html>

于飞SEO

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
点击a标签弹窗iframe窗口实例demo

简介点击a标签弹窗iframe窗口实例demo本代码来源网络，亲测可用，代码简洁高效！代码实例<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Docume
复制链接

扫一扫