演示：

<!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. MySQL常用运算符：算术运算符、比较运算符、逻辑运算符

    (一)  算术运算符 注意: 在除法运算和模运算中,如果除数为0,将是非法除数,返回结果为NULL. div运算符主要是求两个数相除的商 (二)  比较运算符:比较运算符的运算结果为1(条件为真),0 ...

  2. LeetCode 237 Delete Node in a Linked List 解题报告

    题目要求 Write a function to delete a node (except the tail) in a singly linked list, given only access ...

  3. css3之动画属性transform、transition、animation

    工作当中,会遇到很多有趣的小动画,使用css3代替js会节省工作量,css3一些属性浏览器会出现不兼容,加浏览器的内核前缀 -moz-. -webkit-. -o- 1.transform rotat ...

  4. 洛谷P2743 乐曲主题Musical Themes [USACO5.1] SA

    正解:SA 解题报告: 传送门 这题三个条件嘛,那就一个个考虑下都解决了就把这题解决了嘛QwQ 那就直接分别针对三个条件写下各个击破就欧克辣? 1)长度大于等于5:求出答案之后和5比大小 2)不能有公 ...

  5. webpack项目搭建

    1.新建一个文件目录,命令行进入当前目录,输入npm init 创建package.json文件 2.安装项目依赖webpack模块: npm install webpack --save-dev 3 ...

  6. 5、Flutter 实现 ViewPager、bottomNavigationBar 界面切换

    1.前言 首先我们想一下,如果在 Android 中实现 布局切换,通常的思路是: 做一个 viewpager 一组 Fragment 每个 Fragment 绑定一个 xml 最后填充至 viewp ...

  7. java之xml解析-dom4j

    解析方式 XML 解析方式有很多种,但是常用的有两种,如下: DOM Document Object Model:把整个 XML 读到内存中,形成树状结构.整个文档为 Document 对象,属性为 ...

  8. 2018-2019-1 20189203《linux内核原理与分析》第六周作业

    第一部分 给Menu OS增加命令 输入命令 rm -rf menu git clone http://github.com/mengning/menu.git make rootfs 查看增加的ti ...

  9. 下载工具axel 和 mwget

    axel, yum安装或者apt-get安装 但有时axel不行,需要上wget,但单线程的太慢,需要安装mwget.apt-get -y install intltoolwget http://ja ...

  10. Java中 == 和 equals 的问题

    == : 它的作用是判断两个对象的地址是不是相等.即,判断两个对象是不是同一个对象.(基本数据类型==比较的是值,引用数据类型==比较的是内存地址) equals() : 它的作用也是判断两个对象是否 ...