JS模态框 简单案例
演示:
<!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模态框 简单案例的更多相关文章
- js模态框实现原理
<!DOCTYPE> <html> <head> <style>/* 定义模态对话框外面的覆盖层样式 */ #modal-overlay { visib ...
- 原生js模态框实现
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- yii2.0 模态框简单使用
1 <?php foreach($data as $model) :?> 2 3 <!-- 按钮触发模态框 --> 4 <button class="btn b ...
- 使用bootstrap的JS插件实现模态框效果
在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...
- JavaScript:bootstrap 模态框的简单应用
最近用上了bootstrap这个强大的前端框架,有空来总结一下.这里记录下模态框的简单应用. 首先,要在页面中引入相应的js.css文件 <link href="css/bootstr ...
- js控制Bootstrap 模态框(Modal)插件
js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html
- Js实例——模态框弹出层
1.描述 百度登录就是一个模态框弹出层.思路分析:先将灰色大背景和登陆盒子设为不可见,利用JS将其动态加载可见. 2.代码 <!DOCTYPE html> <html> < ...
- Bootstrap入门(二十三)JS插件1:模态框
Bootstrap入门(二十三)JS插件1:模态框 1.静态实例 2.动态实例 3.模态框的尺寸和效果 4.包含表单的模态框 模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能 ...
- [js高手之路]设计模式系列课程-单例模式实现模态框
什么是单例呢? 单,就是一个的意思.例:就是实例化出来的对象,那合在一起就是保证一个构造函数只能new出一个实例,为什么要学习单例模式呢?或者说单例模式有哪些常见的应用场景.它的使用还是很广泛,比如: ...
随机推荐
- 逆向工程之修改关键CALL返回值_破解视频转换专家
1)注册软件随便输入注册名注册码 2)进入软件根目录,发送到PEID查壳 3)发现无壳 4)发送到OD 4.1)右键菜单选择智能搜索 4.2)找到关键信息点注册 4.3)找到关键信息点双击进入汇编,向 ...
- 2018-2019-2 20175320实验一《Java开发环境的熟悉》实验报告
2018-2019-2 20175320实验一<Java开发环境的熟悉>实验报告 一.实验步骤及内容 (一)带包程序的编译运行 1.使用mkdir命令创建如图所示目录 2.进入exp1下的 ...
- Redis集合 安装 哨兵集群 配置
redis相关 redis基础 redis发布订阅 redis持久化RDB与AOF redis不重启,切换RDB备份到AOF备份 redis安全配置 redis主从同步 redis哨兵集群 redis ...
- vimrc同步文档
目录 vimrc ims.vim vimrc if has("syntax") syntax on endif set nocompatible "取消vi 兼容模式 & ...
- ng2-table
[转]https://github.com/valor-software/ng2-table demo:http://valor-software.com/ng2-table/ ng2-table ...
- 使用pm2在同服务器配置开发、生产、测试等环境
export NODE_ENV=production 只能适用于node xxx.js的前台运行 set NODE_ENV=production貌似无效 pm2 做法: 创建pm2.config.js ...
- Python学习之高级数组(一)
1.Python基础学习之高级数组(一) 1.1视图:就是与较大数组共享相同数据的较小数组.Numpy包提供数据视图的概念是为了精确地控制内存的使用方式. 数组视图.切片视图.转置和重塑视图等 数组 ...
- 026-微软Ajax异步组件
ASP.Net中内置的简化AJAX开发的控件UpdatePanel放入ScriptManager,将要实现AJAX效果的控件放到UpdatePanel中即可.UpdatePanel原理探秘,用Http ...
- tf.InteractiveSession()和tf.Session()
tf.InteractiveSession()适合用于python交互环境 tf.Session()适合用于源代码中 1.tf.InteractiveSession() 直接用eval()就可以直接获 ...
- 18 os/os.path模块中关于文件/目录常用的函数使用方法 (转)
os模块中关于文件/目录常用的函数使用方法 函数名 使用方法 getcwd() 返回当前工作目录 chdir(path) 改变工作目录 listdir(path='.') 列举指定目录中的文件名('. ...