• 售前

  • 售后

热门帖子
入门百科

html实现弹窗的实例

[复制链接]
确实是个孩子谥 显示全部楼层 发表于 2021-8-14 14:58:56 |阅读模式 打印 上一主题 下一主题
上午闲来无事,用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弹窗内容请搜刮草根技术分享以前的文章或继续浏览下面的相干文章,盼望大家以后多多支持草根技术分享!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作