演示:

<!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>

最新文章

  1. lua创建文件和文件夹
  2. runv containerd 流程分析
  3. Delphi XE5 如何与其他版本共存
  4. 树莓派/RaspberryPi 内核编译
  5. 【算法题】- 求和等于K子数组
  6. 【转】setAnimation和startAnimation区别
  7. 距离变换DT
  8. vsftp之虚拟用户
  9. SmartSql 更新日志
  10. pygame-KidsCanCode系列jumpy-part10-角色动画(上)
  11. js之全选即点击全选标签可选择全部复选框
  12. Xming导致的SecureCRT远程登录的普通用户图形程序不能运行
  13. Centos6.3 下使用 Tomcat-6.0.43 非root用户 jsvc模式部署 生产环境 端口80 vsftp
  14. 【elaseticsearch】elaseticsearch启动报错Caused by: org.elasticsearch.transport.BindTransportException: Failed to bind to [9300-9400]
  15. R基础-适合于纯小白
  16. H5应用程序缓存 - Cache manifest
  17. 虚拟机安装centos发现inet为127.0.0.1,导致Xshell连接不上
  18. android popupwindow位置显示
  19. SQL表创建注意事项
  20. Android开发——Context类的各种细节问题

热门文章

  1. TODO:小程序开发过程之体验者
  2. ffmpeg 安装,转视频格式为m3u8,压缩视频
  3. web前端面试总结
  4. JavaScript------获取url地址中的参数
  5. Visual Studio 2015 Update 2正式版下载地址
  6. 多线程下NSOperation、NSBlockOperation、NSInvocationOperation、NSOperationQueue的使用
  7. c#实现邮件发送链接激活
  8. JavaScript 的字符串转换
  9. php相关书籍视频
  10. WebApi Help Pages
  11. EF dbcontext上下文的处理
  12. [转载]Eclipse自定义快捷键导出和导入方法
  13. springboot+CXF开发webservice对外提供接口(转)
  14. awk 命令详解
  15. bzoj 2095: [Poi2010]Bridges [混合图欧拉回路]
  16. Python基础题
  17. 微服务与SOA的区别
  18. [Swift]LeetCode939. 最小面积矩形 | Minimum Area Rectangle
  19. 【java】转:Windows系统下面多个jdk版本切换
  20. MQTT服务器本地搭建