html实现弹窗的实例

程序员文章站 2021-12-07 10:09:49

html实现弹窗的实例本文将结合实例代码，介绍html实现弹窗的实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下... 21-06-09...

上午闲来无事，用html及原生js写个弹窗，供参考。

<!doctype html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   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{
    height: 40px;
   }
   #header-right{
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 5px;
    background: red;
    color: #fff;
    right: 5px;
    top: 5px;
    text-align: center;
   }
  </style>
 </head>
 <body>
  <button type="button" onclick="dianwo()">点我</button>
  <div class="zhezhao" id='zhezhao'>
   <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>
 </body>
</html>

到此这篇关于html实现弹窗的实例的文章就介绍到这了,更多相关html弹窗内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

html实现弹窗的实例

c#使用简单工厂模式实现生成html文件的封装类分享

Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)

C#实现写入与读出文本文件的实例代码

Android listview ExpandableListView实现多选，单选，全选，edittext实现批量输入的实例代码

实例详解Android自定义ProgressDialog进度条对话框的实现

ajax实现上传图片保存到后台并读取的实例（图文教程）

html5 table标签的样式介绍（另附html5 table css居中的实例）

css颜色渐变实例：css3文字颜色渐变的实现方法

html5 datalist标签的用法是什么？这里有datalist标签的用法实例

HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例_html5教程技巧