演示：

<!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. Linux 安装mysql mariadb配置

    CentOS 7.0 使用 yum 安装 MariaDB 与 MariaDB 的简单配置 1.安装MariaDB 安装命令 yum -y install mariadb mariadb-server ...

  2. Rob Pike

    罗布·派克_百度百科 https://baike.baidu.com/item/罗布·派克   1. 你无法断定程序会在什么地方耗费运行时间.瓶颈经常出现在想不到的地方,所以别急于胡乱找个地方改代码, ...

  3. Java ee第三周作业

    listener: Listener是JavaWeb的三大组件Servlet.Filter.Listener之一 Listener的中文名称为监听器,它是Servlet的监听器,它可以监听客户端的请求 ...

  4. Linux服务器上搭建web项目环境

    一.下载并安装jdk 去官网下载linux系统上jdk的安装包jdk-8u181-linux-x64.tar.gz,在Linux的/usr目录下新建文件夹java,可以使用命令:cd /usr    ...

  5. vivi.c框架

    内核文档: V4L2-framework.txt UVC:usb video controll UVC驱动框架: system call: open read write -------------- ...

  6. 为虚拟机配置NAT网络

    一.打开网络适配器 1.按图中所示进行配置 2.记得把网和VM8关联一下 3.点击网络设置 4.点击右下角小齿轮来配置ip 5.在IPv4下选择手动 6. 7. 这个就是Linux的NAT配置

  7. Vuex入门（5）—— 为什么要用Action管理异步操作

    Action 类似于 mutation,不同在于: 1.Action 提交的是 mutation,而不是直接变更状态. 2.Action 可以包含任意异步操作. 官方给的定义我没什么意见,事实上我通过 ...

  8. Python3学习之路~5.10 PyYAML模块

    Python也可以很容易的处理ymal文档格式,只不过需要安装一个模块,参考文档:http://pyyaml.org/wiki/PyYAMLDocumentation

  9. 3.1.2 Spring之IoC

    二.Spring之IoC 1. IoC与DI (1) IoC 控制反转( IoC, Inversion of Control) , 是一个概念, 是一种思想. 控制反转就是对对象控制权的转移, 从程序 ...

  10. python学习之数组二

    作用于数组的函数: 通用函数:函数基于元素的,以单元方式作用于数组的,返回的是与原数组具有相同形状的数组. 不通用函数(数组函数):函数能以行或者列的方式作用于整个矩阵:如果没有提供任何参数时,它们将 ...