【Javascript Demo】遮罩层和弹出层简单实现
最近纠结于遮罩层和弹出层的实现,终于搞定了个简单的版本。示例和代码如下,点击按钮可以看到效果:
1.示例:
2.代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>遮罩层和弹出层简单实现</title> <script type="text/javascript"> function show() { var div = document.createElement("div");
var div_show = document.getElementById("div_show");
div.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
div.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";
div.style.backgroundColor = "#000000";
div.style.position = "absolute";
div.style.opacity = 0.5;
div.style.left = 0;
div.style.top = 0;
div.id = "zhebiceng";
div.style.zIndex = 100;
top.document.getElementById("div_body").appendChild(div); div_show.style.display = "block";
} function play_show() {
var div = top.document.getElementById("zhebiceng");
var div_show = document.getElementById("div_show");
div_show.style.display = "none";
div.style.display = "none";
div.parentNode.removeChild(div);
}
</script> </head> <body> <div id="div_body">
<input type="button" value="click" onclick="show()" />
</div>
<div id="div_show" style=" background:white;display: none;height: 400px;left: 80px; position: fixed;top: 88px; width: 80%;z-index: 99999;">
<input type="button" value="关闭" onclick="play_show();" style="float: right;" />
</div>
</body> </html>
【Javascript Demo】遮罩层和弹出层简单实现的更多相关文章
- 【Javascript Demo】谷歌地图简单实现(附遮罩层和弹出层实现)
虽然百度地图实现了,但只是国内的,而且前几天貌似还出问题了,对于国际的只能用谷歌地图了,所以就简单研究了下,做了个差不多的. 基本步骤,谷歌地图API文档其实写的很清楚了,先获取API密钥,然后引用j ...
- js 带遮罩层的弹出层
最近有个小伙伴问我关于mui的带遮罩层的弹出层,我给他发了个相关demo,但是因为他是新手的原因没有看懂,所以我写了一个单纯的原生的带遮罩层的弹出层dome.写这篇微博希望可以帮到需要的小伙伴. &l ...
- js特效遮罩层(弹出层)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- bootstrap弹出层嵌套弹出层后文本框不能获得焦点输入
如图上 我从页面打开一个bootstrap弹出层 然后又在 bootstrap弹出层的基础上打开一个layui的弹出层 打开后发现文本域获取不到焦点不能输入内容 而该弹出层显示的层级体现出来了 按钮 ...
- element-ui 弹出组件的遮罩层在弹出层dialog模态框的上面
造成的原因: 因为dialog的组件外层div设置了 position:absolute: 属性所以导致遮罩层会在最上面. 解决方法: 在属性内加上这段代码 :append-to-body=&quo ...
- element ui 弹出组件的遮罩层在弹出层的上面的解决方法
<el-dialog title="收货地址" :visible.sync="dialogFormVisible" :modal-append-to-bo ...
- 【Javascript Demo】遮罩层和百度地图弹出层简单实现
其实想做的就是显示百度地图的弹出层,现在已经简单实现了.示例和代码如下,点击按钮可以看到效果: 1.示例: 2.代码: <!DOCTYPE html PUBLIC "-//W3C/ ...
- javascript实现掉落弹出层------Day29
顾名思义.所谓"掉落弹出层".就是出现一个弹出层,而出现的位置是从上方向下掉落.掉落到指定的位置停止,这样分析起来.和"右下角弹出提醒对话框"比起来,确有异曲同 ...
- div滚动条弹出层效果 (所需要的css文件和js文件,都已经上传到文件里面了progressbar.rar)
<%--总的弹出层--%> <div class="tcck" id="joinclub" style="display:none& ...
随机推荐
- 鸟哥的私房菜:Bash shell(一)-Bash shell功能简介
Bash shell系列里,由变量谈起,先讲到环境变量的功能与修改的问题, 然后会继续提到历史指令的运用.接下来,就会谈一下『数据流重导向』这个重要概念, 最后就是管线命令的利用! 一 Bash s ...
- hdu 3879 方案选择
每日一水--- #include <cstdio> #include <cstring> #include <vector> #define oo 0x3f3f3f ...
- CGI 、PHP-CGI、FASTCGI、PHP-FPM
CGI是干嘛的? CGI是为了保证web server传递过来的数据是标准格式的,方便CGI程序的编写者.web server(比如说nginx)只是内容的分发者.比如,如果请求的是/index/ht ...
- IE11 全新的F12开发者工具
我讨厌debug,相信也没多少开发者会喜欢.但是当代码出错之后肯定是要找出问题出在哪里的.不过网页开发的时候遇到 BUG 是一件再正常不过的事情了,我们不能保证自己的代码万无一失,于是使用浏览器的 ...
- 介绍一下开源项目FastAnimationWithPOP
介绍一下开源项目FastAnimationWithPOP JUL 23RD, 2014 这是一个非常easy的动画框架,基于Facebook的POP库. 使用它你就能够在故事版中以0行代码的代价来加入 ...
- MVC路由之浅见
1.定义路由.路由规则 public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{re ...
- mq刷盘方式
Broker 在收到Producer发送过来的消息后,会存入CommitLog对应的内存映射区中,见CommitLog类的putMessage方法.该方法执行OK后,会判断存储配置中刷盘模式:同步or ...
- HTTP 协议中 Vary 的一些研究
经常抓包看 HTTP 请求的同学应该对 Vary 这个响应头字段并不陌生,它有什么用?用 PageSpeed 工具检查页面时,经常看到「Specify a Vary: Accept-Encoding ...
- 求好用的在线手册编写工具,能编写像bootstrap在线Doc那种的,想为OpenCenter写个在线手册
原文地址:http://www.oschina.net/question/1014458_225711 各位OSCer的开源项目的在线说明文档都是用什么写的呢? 类似 http://v3.bootcs ...
- tomcat 启动时设置 java 参数,mark
在文件 startup.bat/.sh 中添加 set "JAVA_OPTS=-Xms2048m -Xmx4096m -XX:NewSize=256m -XX:MaxNewSize=102 ...