html如何实现弹窗 html实现弹窗代码示例

时间：2022-06-25 17:50:49 编辑：袖梨来源：一聚教程网

html如何实现弹窗？本篇文章小编给大家分享一下html实现弹窗代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

代码如下：

<meta charset="utf-8">
 <title></title>
 <style type="text/<a href=" http:="" www.111com.net="" cssdiv="" css.html"="" target="_blank">css</a>">
  body{
   margin: 0px;
  }
  .zhezhao{
   position: fixed;
   left: 0px;
   top: 0px;
   background: #000;
   width: 100%;
   height: 100%;
   opacity: 0.5;
  }
  .tankuang{
   position: relative;
   background: #fff;
   width: 50%;
   height: 80%;
   border-radius: 5px;
   margin: 5% auto;
  }
  #header{
    
  }
  #header-right{
   position: absolute;
    
    
   border-radius: 5px;
   background: red;
   color: #fff;
   right: 5px;
   top: 5px;
   text-align: center;
  }
 </style>
 
 
 <button type="button" onclick="dianwo()">点我</button>
 <div class="zhezhao" id="zhezhao" style="display: none;">
  <div class="tankuang">
   <div id="header">
    <span>我是弹窗</span>
    <div id="header-right" onclick="hidder()">x</div>
   </div>
  </div>
 </div>
 <script type="text/javascript">
  document.getElementById('zhezhao').style.display="none";
  function dianwo(){
   document.getElementById('zhezhao').style.display="";
  }
  function hidder(){
   document.getElementById('zhezhao').style.display="none";
  }
 </script>
<script defer="" src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon="{"rayId":"92a3707bcba98137","version":"2025.3.0","r":1,"serverTiming":{"name":{"cfExtPri":true,"cfL4":true,"cfSpeedBrain":true,"cfCacheStatus":true}},"token":"09a15e901f154c8c900d5950c76ccb92","b":1}" crossorigin="anonymous"></script>

推荐专题

最新下载

热门教程

html如何实现弹窗 html实现弹窗代码示例

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程