html实现弹窗的实例


Posted in HTML / CSS onJune 09, 2021

上午闲来无事,用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 / CSS 相关文章推荐
CSS3中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
详解css3 mask遮罩实现一些特效
Oct 24 HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
Feb 27 HTML / CSS
CSS3 box-sizing属性详解
Nov 15 HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
Apr 24 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 HTML / CSS
详解WebSocket跨域问题解决
Aug 06 HTML / CSS
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
Apr 13 HTML / CSS
html css3不拉伸图片显示效果
html2 canvas svg不能识别的解决方案
Jun 03 #HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 #HTML / CSS
CSS极坐标的实例代码
css height属性中的calc方法详解
Jun 03 #HTML / CSS
html+css实现文字折叠特效实例
html+css实现分层金字塔的实例
You might like
PHPShop存在多个安全漏洞
2006/10/09 PHP
MySQL中create table语句的基本语法是
2007/01/15 PHP
php5数字型字符串加解密代码
2008/04/24 PHP
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
编写简单的Python程序来判断文本的语种
2015/04/07 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
python实现图片筛选程序
2018/10/24 Python
python贪吃蛇游戏代码
2020/04/18 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
施工安全协议书
2013/12/11 职场文书
学习型班组申报材料
2014/05/31 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
运动会稿件100字
2014/09/24 职场文书
见习报告格式范文
2014/11/08 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
详解Vue的options
2021/05/15 Vue.js
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS