html文件内容如下

<!--调出子窗口按钮-->
<button class="add" onclick="addClick();">新增</button>
<!--子窗口-->
<div id="addBox" class="addBox">
<a href="javascript:;" onclick="jQuery('.addBox').hide();jQuery('.shadow').hide();" class="close">×&nbsp;&nbsp;</a>
<div>
<!--遮罩层-->
<div class="shadow"></div>

css文件内容如下

.shadow{
width:100%;
height:100%;
position:absolute;
left:;
top:;
z-index:;
background-color:#000;
opacity:0.6;
display:none;
}
.addBox{
//其他属性
z-index:;
}

js内容如下

function addClick(){
$(".shadow").css({'display':'block'});
$('.addBox').show();
return 0;
}

效果如下

html遮罩层实现的更多相关文章

  1. jQuery遮罩层登录对话框

    用户登录是许多网站必备的功能.有一种方式就是不管在网站的哪个页面,点击登录按钮就会弹出一个遮罩层,显示用户登录的对话框.这用方式比较灵活方便.而现在扫描二维码登录的方式也是很常见,例如QQ.微信.百度 ...

  2. 使用CSS3的box-shadow实现双透明遮罩层对话框

    box-shadow介绍 在我之前的一篇文章<从天猫和支付宝身上学习opcity与rgba>中,介绍了实现双透明遮罩层效果的两种方法,分别是opacity和rgba.他们需要分别依赖于不同 ...

  3. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  4. jQuery弹出关闭遮罩层

    效果体验:http://keleyi.com/keleyi/phtml/jquery/9.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

  5. 弹出页面遮罩层,以及web端和移动端阻止遮罩层的滑动。

    最近项目遇到了遮罩层的一些问题,总结一下: 弹出遮罩层 遮罩层弹出有非常多的方法,这里只写出本人用的代码,使用jq操作dom的方法进行实现的. <style>.box{position:a ...

  6. js简单弹出层、遮罩层

    <html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...

  7. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  8. Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  9. Android 遮罩层效果

    (用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果, ...

  10. HTML按钮实现!!!文件上传,遮罩层

    按钮上传文件: <input type="file" /> file的意思为提交 每个游览器的显示方式都不一样哦 遮罩层:   设两个id <style type ...

随机推荐

  1. runtime - 消息发送(objc_msgSend)

    http://www.jianshu.com/p/95c8cb186673 在OC中,我们对方法的调用都会被转换成内部的消息发送执行对objc_msgSend方法的调用,掌握好消息发送,可以让我们在编 ...

  2. 编程语言与dsl

    通用编程语言面向的是计算机通用功能: 即数据.计算.资源管理及数据与计算的组合方式: 数据与计算.计算与计算的组合方式是通用语言的问题域,是通用编程语言的在计算机硬件的基础上对问题解决通用描述方式: ...

  3. tomcat catalina

    脚本catalina用于启动和关闭tomcat服务器,是最关键的脚本 在tomcat里有此文件 写这个脚本的人为什么命名为catalina一开始我还以为是其初恋女友,后来才知道原来是一个小岛的名字.

  4. PinPoint使用教程

    选择该应用的展示边界 InBound:3 OutBound:3 基本概念 APM (Application Performance Management/应用性能管理)工具 为大规模分布式系统. 开发 ...

  5. Eclipse中将java类打成jar包形式运行

    记录一次帮助小伙伴将java类打成jar包运行 1.创建java project项目 file > new > project > java project 随便起一个项目名称,fi ...

  6. round.606.div2

    A. Happy Birthday, Polycarp! 这个题意我确实没有看懂. 沃日,我懂了,我感觉我似乎都能切掉这题. B. Make Them Odd 这个我也能看懂.

  7. 使用solr将CSV/XML/DB/JSON数据发布为Rest Service

    Download http://lucene.apache.org/solr/downloads.html Apache Solr入门基础——Windows下安装与配置 https://blog.cs ...

  8. Hibernate的批量查询——HQL

    HQL(Hibernate Query Language)查询: 1.查询所有学生信息: public static void testSel() { Session session = Hibern ...

  9. plotly-dash 简单使用(一)

    plotly-dash 是一个很不错的dashboard 开发平台,基于python 编写,提供了很便捷的dashboard 开发模型 同时扩展上也比较灵活我们可以编写自己的组件. 以下是一个简单的项 ...

  10. 常用方法 DataTable转换为Html

    点击单元格 可以输出行和列,这个功能可以在一些特殊的地方用 public static string GetHtmlString(DataTable dt) { StringBuilder sb = ...