请选择 进入手机版 | 继续访问电脑版
游客您好
第三方账号登陆
单益飞 新手上路
未知星球 | 未知职业
  • 关注0
  • 粉丝0
  • 帖子1
Ta的其他帖子
热议话题
zblog php mip主题开发官方指南
2020-07-08 0
由于百度对MIP的支持使得MIP网页大受欢迎,众多站长纷纷把网页改造成MIP。作为国内主
精选帖子

[HTML5] html实现弹窗的实例

[复制链接]
单益飞 发表于 2021-7-24 09:40:11 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
上午闲来无事,用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>
复制代码


回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

推荐阅读

© 2001-2020 懒人建站 ( 辽ICP备18012687号-3 )

辽公网安备 21032102000036号