演示：

<!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. python全栈开发 * 进程池,线程理论 ,threading模块 * 180727

    一.进程池 (同步 异步 返回值) 缺点: 开启进程慢 几个CPU就能同时运行几个程序 进程的个数不是无线开启的 应用: 100个任务 进程池 如果必须用多个进程 且是高计算型 没有IO型的程序 希望 ...

  2. MVC的HTTP请求处理过程(IIS应用程序池、CLR线程池)

    主要内容 本文讲解的是:服务器接受Http Request请求之后,是如何进入.Net CLR,从而进一步操作的. 我们大家都知道,IIS必须先接受请求,然后才能有机会进入CLR,但对请求(reque ...

  3. the pitfull way to create a uClinux image including gdb.

    After downloaded and installed the GCT's SDK and toolchain, we try to make an our own image which in ...

  4. xargs实例

    1. 当你使用rm命令去删除很多的文件时,你可能会得到错误信息:“/bin/rm Argument list too long – Linux”.这时可以用xargs来避免这个问题 find ~ -n ...

  5. linux之tail和head的使用

    tail 基本介绍 用于显示文件的结尾的内容.在默认情况下,taild命令显示文件的后10行内容 表达式 tail [options] [filenames] 常用参数 -c:输出最后N个字节 -f: ...

  6. Mac系统显示隐藏文件及文件夹

    显示隐藏文件 终端 输入如下命令,回车即可: defaults write com.apple.finder AppleShowAllFiles -boolean true ; killall Fin ...

  7. TP框架中分页类的使用

    public function test(){ $m=M('Message'); import('ORG.Util.Page');// 导入分页类 $count = $m->count();// ...

  8. java框架之Struts2(4)-拦截器&标签库

    拦截器 概述 Interceptor (拦截器):起到拦截客户端对 Action 请求的作用. Filter:过滤器,过滤客户端向服务器发送的请求. Interceptor:拦截器,拦截的是客户端对 ...

  9. [js]nodejs初探http/url/fs模块

    难怪我没学会, 因为我的套路有问题. 错误点, 1,大而全 2,不注重思路 学习要领: 1, 小而精 2, 重思路(总结) nodejs特点: 1.node提供了js的运行环境, 一般将node运行在 ...

  10. std::bind学习

    std::bind bind是对C++98标准中函数适配器bind1st/bind2nd的泛化和增强,可以适配任意的可调用对象,包括函数指针.函数引用.成员函数指针和函数对象. bind接受的第一个参 ...