设为首页收藏本站
开启辅助访问 切换到宽版

安徽论坛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

安徽论坛»论坛 › 大国徽商 › 计算机 › html实现弹窗的实例
返回列表 发新帖
查看: 12225|回复: 0

html实现弹窗的实例

[复制链接]
快乐人L

85

主题

0

回帖

267

积分

中级会员

Rank: 3Rank: 3

积分
267
发表于 2022-3-26 11:01:51 | 显示全部楼层 |阅读模式
网站内容均来自网络，本站只提供信息平台，如有侵权请联系删除，谢谢！
上午闲来无事，用html及原生js写个弹窗，供参考。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8" />
  5.   <title></title>
  6.   <style type="text/css">
  7.    body{
  8.     margin: 0px;
  9.    }
  10.    .zhezhao{
  11.     position: fixed;
  12.     left: 0px;
  13.     top: 0px;
  14.     background: #000;
  15.     width: 100%;
  16.     height: 100%;
  17.     opacity: 0.5;
  18.    }
  19.    .tankuang{
  20.     position: relative;
  21.     background: #fff;
  22.     width: 50%;
  23.     height: 80%;
  24.     border-radius: 5px;
  25.     margin: 5% auto;
  26.    }
  27.    #header{
  28.     height: 40px;
  29.    }
  30.    #header-right{
  31.     position: absolute;
  32.     width: 25px;
  33.     height: 25px;
  34.     border-radius: 5px;
  35.     background: red;
  36.     color: #fff;
  37.     right: 5px;
  38.     top: 5px;
  39.     text-align: center;
  40.    }
  41.   </style>
  42. </head>
  43. <body>
  44.   <button type="button" onclick="dianwo()">点我</button>
  45.   <div class="zhezhao" id='zhezhao'>
  46.    <div class="tankuang">
  47.     <div id="header">
  48.      <span>我是弹窗</span>
  49.      <div id="header-right" onclick="hidder()">x</div>
  50.     </div>
  51.    </div>
  52.   </div>
  53.   <script type="text/javascript">
  54.    document.getElementById('zhezhao').style.display="none";
  55.    function dianwo(){
  56.     document.getElementById('zhezhao').style.display="";
  57.    }
  58.    function hidder(){
  59.     document.getElementById('zhezhao').style.display="none";
  60.    }
  61.   </script>
  62. </body>
  63. </html>
复制代码
到此这篇关于html实现弹窗的实例的文章就介绍到这了,更多相关html弹窗内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
                                                                                               
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
免责声明
1. 本论坛所提供的信息均来自网络，本网站只提供平台服务，所有账号发表的言论与本网站无关。
2. 其他单位或个人在使用、转载或引用本文时，必须事先获得该帖子作者和本人的同意。
3. 本帖部分内容转载自其他媒体，但并不代表本人赞同其观点和对其真实性负责。
4. 如有侵权，请立即联系，本网站将及时删除相关内容。
回复 设为聚合帖聚合到帖子

使用道具 举报

返回列表 发新帖
懒得打字嘛，点击右侧快捷回复 【右侧内容，后台自定义】
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表