div效果很好的遮盖层效果
- <!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>
- <title>DIV CSS遮罩层</title>
- <script language="javascript" type="text/javascript">
- function showdiv() {
- document.getElementById("bg").style.display ="block";
- document.getElementById("show").style.display ="block";
- }
- function hidediv() {
- document.getElementById("bg").style.display ='none';
- document.getElementById("show").style.display ='none';
- }
- </script>
- <style type="text/css">
- #bg{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70);}
- #show{display: none; position: absolute; top: 25%; left: 22%; width: 53%; height: 49%; padding: 8px; border: 8px solid #E8E9F7; background-color: white; z-index:1002; overflow: auto;}
- </style>
- </head>
- <body>
- <input id="btnshow" type="button" value="Show" onclick="showdiv();"/>
- <div id="bg"></div>
- <div id="show">测试
- <input id="btnclose" type="button" value="Close" onclick="hidediv();"/>
- </div>
- </body>
- </html>
div效果很好的遮盖层效果的更多相关文章
- 利用div实现遮罩层效果
利用div实现遮罩层效果就是利用一个全屏.半透明的div遮住页面上其它元素,典型的例子就是百度的登录界面.下面贴出示例代码: <!DOCTYPE html> <html> &l ...
- 弹窗层效果的实现(非jQuery实现)
要想实现弹窗的效果,首先应该创建一个覆盖层maskLayer,以及一个显示层presentLayer. 其次,每次弹窗时(除首次弹窗外),maskLayer的显示以及隐藏不应该导致文档流的reflow ...
- jquery制作弹出层带遮罩效果,点击阴影部分层消失
jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...
- Web 开发中很实用的10个效果【附源码下载】
在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...
- Fancybox丰富的弹出层效果
Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片 ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
- Android 遮罩层效果
(用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果, ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- [转]jquery Fancybox丰富的弹出层效果
本文转自:http://www.helloweba.com/view-blog-65.html Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facyb ...
随机推荐
- 使用WebStorm进行javascript调试
曾经的选择是使用火狐浏览器的Firebug插件,具体的用法到时候在细说,这篇文章登场的是开发静态网页及javascript的利器--webstorm. 一.相关软件安装和配置 安装WebStorm ...
- vue-cli2.9.1如何自动打开浏览器及实现手机调试
在vue-cli2.9.1以前我们运行 "npm run dev" 程序会自动打开浏览器进行调试,而且在手机浏览器输入 "IP地址:8080" 能实现在手机端的 ...
- 关于导入excel问题
关于导入excel问题: 在VS中可以导入,部署在IIS上无法导入的原因: 1.可能部署IIS上发布的文件设置为只读,没有写入权限.解决方法为:设置程序发布的文件夹,添加写入权限,以及asp.net ...
- TensorFlow LSTM 注意力机制图解
TensorFlow LSTM Attention 机制图解 深度学习的最新趋势是注意力机制.在接受采访时,现任OpenAI研究主管的Ilya Sutskever提到,注意力机制是最令人兴奋的进步之一 ...
- Tensorflow 基于分层注意网络的文件分类器
After the exercise of building convolutional, RNN, sentence level attention RNN, finally I have come ...
- Angular 和 Vue 使用的对比总结 -- 脚手架
前言 之前是用Vue的,现在由于工作原因,开始使用Angular.分别是Vue2和Angular5入的坑.只是从使用上来对比总结,加深记忆,避免混淆. 什么 ? 你问实现原理的异同及优劣? 本宝宝还 ...
- VS生成项目时,有些文件无法复制到输出目录的解决办法
有时候,我们在生成项目时,发现有些文件如:.jpg的图片文件,无法复制到输出目录中,此时会非常纠结,反复的清理项目,重新生成,依旧不能解决此问题.后来我打开.csproj的项目工程文件时,经过对比发现 ...
- 关于 printf scanf getchar
float默认小数6位 右对齐.-m 左对齐 在调用printf函数输出数据时,当数据的实际位宽大于printf函数中的指定位宽时,将按照数据的实际位宽输出数据. .n表精度 输出%符号 注意点 #i ...
- 微信小程序 发现之旅(一)—— 项目搭建与页面跳转
开发微信小程序需要注册一个小程序账号,具体流程可以参照官方教程: https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 开通账户之后,在 “开发设置 ...
- page1
1.1 常用的客户端技术:HTML. CSS. 客户端脚本技术 1.2 常用的服务器端技术:CGI .ASP .PHP (一种开发动态网页技术).ASP.NET(是一种建立动态web应用程序的技术,是 ...