分享好友 教程首页 教程搜索 频道列表

html实现弹窗的实例

2021-12-22 19:073620
+关注2
核心提示:用html及原生js写个弹窗,供参考

用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>


本文标签: #弹窗 #广告
整理员:网络转载
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

js怎么实现弹幕功能

    实现方法:1、创建html文件;2、添加html代码架构;3、在body标签中使用div、input、button标签分给页面设计效果显示框、输入框、弹幕提交按钮;4、添加script标签并写入js代码来实现弹幕效果;5、通过浏览器方式查看设计效果。

小黑 JavaScript教程2024-03-12

在H5手机端页面上显示弹窗后禁止底层滚动的解决方案

    今天介绍在H5手机端页面上显示弹窗后禁止底层滚动的解决方案

小黑 JavaScript教程2023-07-28

手机版上的弹窗html、css、js

    以下是一个简单的示例弹窗的 HTML、CSS 和 JavaScript 代码,这个弹窗的样式和动作分别由 CSS 和 JavaScript 控制。当页面加载完毕后,自动运行

小黑 CSS教程2023-04-12

前端开发技术之jquery实现可关闭的倒计时广告特效HTML代码

    这是一款类似播放视频时候最开始的倒计时广告,广告时间结束才能看到视频内容,一个JS小贴片广告代码,右上角带关闭按钮,左上角显示倒计时剩余时间,运行jQuery代码综合实现,CSS和HTML共同结合的网页特效,兼容各

网络转载 JS相关2021-12-22

使用JQuery完成页面定时弹出广告

    Js相关技术定时器:setIntervalclearIntervalsetTimeoutclearTimeout显示: img.style.display = block隐藏: img.style.display = noneimg 对象style属性: style对象需求分析当用户打开界面,3秒钟之后弹出广告,这个

小黑 JS相关2021-12-22

下一篇
我来说两句
抢沙发