演示：

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

  <style>

	*{

		margin: 0;

		padding: 0;

	}

	a{

		display: block;

		color: #090;

		width: 80px;

		height: 32px;

		border:1px solid #090;

		text-align: center;

		text-decoration: none;

		line-height: 32px;

		margin: 50px auto;

	}

	a:hover{

		background:#090;

		color: #fff;

	}

	#modal-overlay{

		visibility: hidden;

		position: fixed;

		left: 0;

		top: 0;

		width: 100%;

		height: 100%;

		background:rgba(0,0,0,.5);

		z-index: 999;

		text-align: center;

	}

	.modal-data{

		width: 300px;

		margin: 100px auto;

		background:#fff;

		border:1px solid #090;

		text-align: center;

	}

	p{

		width: 80px;

		height: 32px;

		line-height: 32px;

		text-align: center;

		margin: 20px auto;

	}

  </style>

 </head>

 <body>

	<a href="javascript:;" onclick='overlay()'>模态框</a>

	<div id="modal-overlay">

		<div class="modal-data">

			<p>模态框</p>

			<a href="javascript:;" onclick='overlay()'>关闭</a>

		</div>

	</div>

	<script>

		function overlay(){

			var el = document.getElementById("modal-overlay");

			el.style.visibility = (el.style.visibility == "visible")?"hidden":"visible";

		}

	</script>

 </body>

</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. C和C指针小记(十七)-使用结构和指针-链表

    1.链表 链表(linked list)即使是一些包含数据的独立数据结构的(Node)集合. 链表中的每个节点通过链或指针链接在一起. 程序通过指针访问链表中的节点. 节点通常是动态分配的,但也有由节 ...

  2. [math] sagemath

    官网首页:http://www.sagemath.org 首页里引出的两个教程 http://www.gregorybard.com/Sage.html http://sagebook.gforge. ...

  3. 《nginx - 基本操作/配置》

    一:基本操作 - 开启 Nginx nginx -c nginx.conf -  Nginx 的平滑重启 kill -HUP nginx主进程号(平滑重启) -  停止 Nginx * Kill -Q ...

  4. luogu2839 [国家集训队]middle

    题目链接:洛谷 题目大意:给定一个长度为$n$的序列,每次询问左端点在$[a,b]$,右端点在$[c,d]$的所有子区间的中位数的最大值.(强制在线) 这里的中位数定义为,对于一个长度为$n$的序列排 ...

  5. vue中使用mui滑动条无法正常滑动

    需要引入 `mui.min.js`  引入之后浏览器会报错,mui.min.js中的'caller', 'callee', and 'arguments'是不严格模式的js,而webpack中是严格模 ...

  6. mac系统上mysql开启外网访问

    1.首先本地连到数据库在"mysql"库下把user表里User=root的那一行,把Hosts从"locahost"改成"%" 2.然后在 ...

  7. 引入css的两种方式

    摘自:https://www.cnblogs.com/gyjWEB/p/4831646.html 在HTML中引入css的其中的两个方法: 1.如果使用链接式,需要使用如下的语句引入外部css文件: ...

  8. golang schedule crash

    golang 起超过100W的goroutine就会crash,这个算不算是个bug? 2036119xxxxpanic: inconsistent poll.fdMutex goroutine 20 ...

  9. C工程 交互 ceph 分布式存储系统

    网上看到有人问,如何在C项目里调用ceph系统对外提供的API,实现分布式存储. 我在网上搜到了相关信息,但是因为不是会员无法追加答案,故而,贴于此. 赠予有缘人:) ———————————————— ...

  10. Cocos Creator的类别

    cc是命名空间:cocos creater引擎下的类得加cc; 如cc.Node cc.v2; 1).cc.Component组件类onLoadstartupdatelateUpdateonDestr ...