js模态框实现原理
<!DOCTYPE>
<html>
<head>
<style>/* 定义模态对话框外面的覆盖层样式 */
#modal-overlay {
visibility: hidden;
position: absolute; /* 使用绝对定位或固定定位 */
left: 0;
top: 0;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
background-color: #333;
opacity: 0.5; /* 背景半透明 */
}
/* 模态框样式 */
.modal-data{
width:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
}
</style>
</head>
<body>
<div id="modal-overlay" style="visibility: hidden;">
<div class="modal-data">
<p>一个很简单的模态对话框 </p>
<p>点击<a onclick="overlay()" href="">这里</a>关闭</p>
</div>
</div> <a href="#" onclick="overlay()">显示模态对话框</a> <script>function overlay(){
var e1 = document.getElementById('modal-overlay');
e1.style.visibility = (e1.style.visibility == "visible")? "hidden" : "visible";
}</script>
</body>
</html>
js模态框实现原理的更多相关文章
- JS模态框 简单案例
演示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8 ...
- 原生js模态框实现
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- 【js】再谈移动端的模态框实现
移动端模态框的机制因为与PC的模态框机制一直有所区别,一直是许多新人很容易踩坑的地方,最近笔者作为一条老咸鱼也踩进了一个新坑中,真是平日里代码读得太粗略,故而写上几笔,以儆效尤. 故事的起因是这样的, ...
- 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出一个实例,为什么要学习单例模式呢?或者说单例模式有哪些常见的应用场景.它的使用还是很广泛,比如: ...
- 7-20 jquery遍历节点,bootstrap模态框绑定事件和解绑,mock.js,model.urlroot,id,打基础
7-19 1:$(event.target).parents().filter("tr").find("host-name") 为什么选择不到别的host-na ...
- MVC中调用模态框之后导致JS失效
今天在工作中碰到一个页面调用模态框之后,页面原来的JS失效的问题,由于前台经验较少,折腾了一天... 问题描述是这样,在页面,有两个下拉列表框A和B,做了下拉列表框联动,有一个button按钮会调用模 ...
随机推荐
- spring boot IDEA 开发微服务(二)
https://www.cnblogs.com/spaceud/p/8097934.html 参考以上微博,自己实际操作步骤如下: 1~开发准备 JDK:1.8 Spring Boot:2.1.0 S ...
- Linux 永久PATH环境变量
在/etc/profile文件中添加变量[对所有用户生效(永久的)] 用vim在文件/etc/profile文件中增加变量,该变量将会对Linux下所有用户有效,并且是“永久的”. 例如:编辑/etc ...
- 在 Android Studio 上调试数据库 ( SQLite ) (转)
转自:http://c.colabug.com/thread-1781696-1-1.html 以前 Eclipse 时代,调试 SQLite 都是将数据库文件导出到电脑,然后再用软件打开查看.现在我 ...
- java swing示例
该范例主要是JFrame(框架)和Jpanel(画板),在Jpanel容器上添加控件,然后再把Jpanel放进JFrame的容器里面. FrameDemo.java import java.awt.D ...
- js navigator对象
原文:https://www.cnblogs.com/huyihao/p/6003110.html Navigator 对象包含有关浏览器的信息. 很多时候我们需要在判断网页所处的浏览器和平台,Nav ...
- Appium+python自动化1-环境搭建
一.前言 appium可以说是做app最火的一个自动化框架,它的主要优势是支持android和ios,另外脚本语言也是支持java和Python.小编擅长Python,所以接下来的教程是appium+ ...
- Genymotion 模拟器上网出现 net::ERR_NAME_NOT_RESOLVED
Genymotion 模拟器在公司网络安装的,然后启动能正常上网,把笔记本带回家,网络变化了,再使用模拟器 上网显示: (net::ERR_NAME_NOT_RESOLVED) 各种百度,最后用如下方 ...
- privilege instruction error
检查新建的回调函数是否用了__stdcall修饰
- f5售后查询
登录: https://secure.f5.com/validate/validate.jsp http://boochem.blog.51cto.com/628505/633907
- 绝对路径${pageContext.request.contextPath}
${pageContext.request.contextPath}用于解决使用相对路径时出现的问题,它的作用是取出所部署项目的名字. 如图,${pageContext.request.context ...