演示：

<!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. css学习_div+css布局

    1.布局(盒子布局.盒子模型.标准流.脱离文档流) 标准文档流:块级独占一行  ,行内块和行内元素都是和其他共占一行,在盒子中的元素遵循标准流从左到右从上到下排列,超过父元素时会溢出. 一行行看 浮动 ...

  2. orange---openresty.

    需要有一个类似于API网关的中间件来做API的管理工作,也就是API的实现方面更多的考虑业务逻辑,安全.性能.监控可以交由网关来做(如下图所示,下图根据Kong官方文档修改) 通过MySQL存储来简单 ...

  3. 使用hashlib进行文件校验

    import hashlib import os path = r'D:\CentOS 64 位' def file_md5(path): """ 文件校验 :param ...

  4. vue:不同环境配置不同打包命令

    修改prod.env.js 'use strict'const target = process.env.npm_lifecycle_event;if (target == 'build') { // ...

  5. 5、jeecg 笔记之 minidao 条件判断

    1.前言  我们知道 mybatis 中的动态sql语句是基于 OGNL 表达式的.  额外补充一点:mybatis 中的 #{} 和 ${} ,可直接跳过.   #{}表示一个占位符号,#{}接收输 ...

  6. 拦截器、过滤器、@Aspect 区别

    1.需求场景 之前也有在文章写道 “拦截器\过滤器" 的区别,文章链接,在实际开发过程中,我们可能会遇到拦截请求参数的需求,在这我举个场景. 某一个接口的请求参数都是加密的,而请求参中还有一 ...

  7. Python requests库如何下载一个图片资源

    原文地址https://blog.csdn.net/u011541946/article/details/77700074 前面一篇文章介绍了response对象的一些常用API,也已经提到,我们的重 ...

  8. 在 CentOS7 上安装 Zookeeper服务

    1.创建 /usr/local/services/zookeeper 文件夹: mkdir -p /usr/local/services/zookeeper 2.进入到 /usr/local/serv ...

  9. q次询问，每次给一个x，问1到x的因数个数的和。

    q次询问,每次给一个x,问1到x的因数个数的和. #include<cmath> #include<cstdio> #include<cstring> usingn ...

  10. Hadoop 配置文件 & 启动方式

    配置文件: 默认的配置文件:相对应的jar 中 core-default.xml hdfs-default.xml yarn-default.xml mapred-default.xml 自定义配置文 ...