演示:

<!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. 逆向工程之修改关键CALL返回值_破解视频转换专家

    1)注册软件随便输入注册名注册码 2)进入软件根目录,发送到PEID查壳 3)发现无壳 4)发送到OD 4.1)右键菜单选择智能搜索 4.2)找到关键信息点注册 4.3)找到关键信息点双击进入汇编,向 ...

  2. 2018-2019-2 20175320实验一《Java开发环境的熟悉》实验报告

    2018-2019-2 20175320实验一<Java开发环境的熟悉>实验报告 一.实验步骤及内容 (一)带包程序的编译运行 1.使用mkdir命令创建如图所示目录 2.进入exp1下的 ...

  3. Redis集合 安装 哨兵集群 配置

    redis相关 redis基础 redis发布订阅 redis持久化RDB与AOF redis不重启,切换RDB备份到AOF备份 redis安全配置 redis主从同步 redis哨兵集群 redis ...

  4. vimrc同步文档

    目录 vimrc ims.vim vimrc if has("syntax") syntax on endif set nocompatible "取消vi 兼容模式 & ...

  5. ng2-table

    [转]https://github.com/valor-software/ng2-table  demo:http://valor-software.com/ng2-table/ ng2-table ...

  6. 使用pm2在同服务器配置开发、生产、测试等环境

    export NODE_ENV=production 只能适用于node xxx.js的前台运行 set NODE_ENV=production貌似无效 pm2 做法: 创建pm2.config.js ...

  7. Python学习之高级数组(一)

    1.Python基础学习之高级数组(一) 1.1视图:就是与较大数组共享相同数据的较小数组.Numpy包提供数据视图的概念是为了精确地控制内存的使用方式.  数组视图.切片视图.转置和重塑视图等 数组 ...

  8. 026-微软Ajax异步组件

    ASP.Net中内置的简化AJAX开发的控件UpdatePanel放入ScriptManager,将要实现AJAX效果的控件放到UpdatePanel中即可.UpdatePanel原理探秘,用Http ...

  9. tf.InteractiveSession()和tf.Session()

    tf.InteractiveSession()适合用于python交互环境 tf.Session()适合用于源代码中 1.tf.InteractiveSession() 直接用eval()就可以直接获 ...

  10. 18 os/os.path模块中关于文件/目录常用的函数使用方法 (转)

    os模块中关于文件/目录常用的函数使用方法 函数名 使用方法 getcwd() 返回当前工作目录 chdir(path) 改变工作目录 listdir(path='.') 列举指定目录中的文件名('. ...