演示：

  1. <!doctype html>
  2. <html lang="en">
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="Generator" content="EditPlus®">
  6.   <meta name="Author" content="">
  7.   <meta name="Keywords" content="">
  8.   <meta name="Description" content="">
  9.   <title>Document</title>
  10.   <style>
  11. 	*{
  12. 		margin: 0;
  13. 		padding: 0;
  14. 	}
  15. 	a{
  16. 		display: block;
  17. 		color: #090;
  18. 		width: 80px;
  19. 		height: 32px;
  20. 		border:1px solid #090;
  21. 		text-align: center;
  22. 		text-decoration: none;
  23. 		line-height: 32px;
  24. 		margin: 50px auto;
  25. 	}
  26. 	a:hover{
  27. 		background:#090;
  28. 		color: #fff;
  29. 	}
  30. 	#modal-overlay{
  31. 		visibility: hidden;
  32. 		position: fixed;
  33. 		left: 0;
  34. 		top: 0;
  35. 		width: 100%;
  36. 		height: 100%;
  37. 		background:rgba(0,0,0,.5);
  38. 		z-index: 999;
  39. 		text-align: center;
  40. 	}
  41. 	.modal-data{
  42. 		width: 300px;
  43. 		margin: 100px auto;
  44. 		background:#fff;
  45. 		border:1px solid #090;
  46. 		text-align: center;
  47. 	}
  48. 	p{
  49. 		width: 80px;
  50. 		height: 32px;
  51. 		line-height: 32px;
  52. 		text-align: center;
  53. 		margin: 20px auto;
  54. 	}
  55.   </style>
  56.  </head>
  57.  <body>
  58. 	<a href="javascript:;" onclick='overlay()'>模态框</a>
  59. 	<div id="modal-overlay">
  60. 		<div class="modal-data">
  61. 			<p>模态框</p>
  62. 			<a href="javascript:;" onclick='overlay()'>关闭</a>
  63. 		</div>
  64. 	</div>
  65. 	<script>
  66. 		function overlay(){
  67. 			var el = document.getElementById("modal-overlay");
  68. 			el.style.visibility = (el.style.visibility == "visible")?"hidden":"visible";
  69. 		}
  70. 	</script>
  71.  </body>
  72. </html>

JS模态框 简单案例的更多相关文章

  1. js模态框实现原理

    <!DOCTYPE> <html> <head> <style>/* 定义模态对话框外面的覆盖层样式 */ #modal-overlay { visib ...

  2. 原生js模态框实现

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  3. yii2.0 模态框简单使用

    1 <?php foreach($data as $model) :?> 2 3 <!-- 按钮触发模态框 --> 4 <button class="btn b ...

  4. 使用bootstrap的JS插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  5. JavaScript：bootstrap 模态框的简单应用

    最近用上了bootstrap这个强大的前端框架,有空来总结一下.这里记录下模态框的简单应用. 首先,要在页面中引入相应的js.css文件 <link href="css/bootstr ...

  6. js控制Bootstrap 模态框（Modal）插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

  7. Js实例——模态框弹出层

    1.描述 百度登录就是一个模态框弹出层.思路分析:先将灰色大背景和登陆盒子设为不可见,利用JS将其动态加载可见. 2.代码 <!DOCTYPE html> <html> < ...

  8. Bootstrap入门（二十三）JS插件1：模态框

    Bootstrap入门(二十三)JS插件1:模态框 1.静态实例 2.动态实例 3.模态框的尺寸和效果 4.包含表单的模态框 模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能 ...

  9. [js高手之路]设计模式系列课程-单例模式实现模态框

    什么是单例呢? 单,就是一个的意思.例:就是实例化出来的对象,那合在一起就是保证一个构造函数只能new出一个实例,为什么要学习单例模式呢?或者说单例模式有哪些常见的应用场景.它的使用还是很广泛,比如: ...

随机推荐

  1. stm32f769ni-discovery编译例程需要修改

    找不到cmsis_os.h: 方法:在pack文件夹下找cmsis_os.h文件,有四个,选RTOS2文件夹下的. 原因:cmsis_os2.h是新版本,cmsis_os.h封装了cmsis_os2. ...

  2. 记一次windows服务开发中遇到的问题

    最近在研究windows service和quartz.net,所以迅速在园子大神那里扒了一个demo,运行,安装一切顺利. 但在在App.config配置中增加了数据库连接字符串配置后,服务安装后无 ...

  3. Pycharm调试：进入调用函数后返回

    在菜单栏的view中勾选toolbar,然后点击工具栏中左箭头返回到调用函数处.

  4. python 发送无附件邮件

    import smtplibimport tracebackfrom email.mime.text import MIMETextfrom config.config import *        ...

  5. freeswitch的拨号规则配置

    当一个呼叫在ROUTING状态下达到命中拨号规则解析器时,相应的拨号规则就开始解析了.随着解析的进行,在xml文件中的符合条件的或标签中的指令形成一个指令表,安装到这个通道中. 你可以将拨号规则文件放 ...

  6. [js]ajax-异源请求jsonp

    参考: http://www.cnblogs.com/whatisfantasy/p/6237713.html http://www.cnblogs.com/freely/p/6690804.html ...

  7. 9个用来爬取网络站点的 Python 库

    上期入口:10个不到500行代码的超牛Python练手项目 1️⃣Scrapy 一个开源和协作框架,用于从网站中提取所需的数据. 以快速,简单,可扩展的方式. 官网:https://scrapy.or ...

  8. 使用Sqlserver事务发布实现数据同步（zhuanqian）

    事务的功能在sqlserver中由来已久,因为最近在做一个数据同步方案,所以有机会再次研究一下它以及快照等,发现还是有很多不错的功能和改进的.这里以sqlserver2008的事务发布功能为例,对发布 ...

  9. Linux环境下使用tcpdump抓包与下载

    (1)报文抓取 tcpdump -i eno5 host 10.8.12.154 -w /test.cap -i:抓取的网卡 host:目的地址 -w:生成的文件存放路径 Ctrl+c 结束抓包,抓取 ...

  10. postman接口自动化，环境变量的用法详解（附postman常用的方法）

    在实现接口自动测试的时候,会经常遇到接口参数依赖的问题,例如调取登录接口的时候,需要先获取登录的key值,而每次请求返回的key值又是不一样的,那么这种情况下,要实现接口的自动化,就要用到postma ...