html遮罩层实现
html文件内容如下
<!--调出子窗口按钮-->
<button class="add" onclick="addClick();">新增</button>
<!--子窗口-->
<div id="addBox" class="addBox">
<a href="javascript:;" onclick="jQuery('.addBox').hide();jQuery('.shadow').hide();" class="close">× </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遮罩层实现的更多相关文章
- jQuery遮罩层登录对话框
用户登录是许多网站必备的功能.有一种方式就是不管在网站的哪个页面,点击登录按钮就会弹出一个遮罩层,显示用户登录的对话框.这用方式比较灵活方便.而现在扫描二维码登录的方式也是很常见,例如QQ.微信.百度 ...
- 使用CSS3的box-shadow实现双透明遮罩层对话框
box-shadow介绍 在我之前的一篇文章<从天猫和支付宝身上学习opcity与rgba>中,介绍了实现双透明遮罩层效果的两种方法,分别是opacity和rgba.他们需要分别依赖于不同 ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- jQuery弹出关闭遮罩层
效果体验:http://keleyi.com/keleyi/phtml/jquery/9.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
- 弹出页面遮罩层,以及web端和移动端阻止遮罩层的滑动。
最近项目遇到了遮罩层的一些问题,总结一下: 弹出遮罩层 遮罩层弹出有非常多的方法,这里只写出本人用的代码,使用jq操作dom的方法进行实现的. <style>.box{position:a ...
- js简单弹出层、遮罩层
<html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
- Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
- Android 遮罩层效果
(用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果, ...
- HTML按钮实现!!!文件上传,遮罩层
按钮上传文件: <input type="file" /> file的意思为提交 每个游览器的显示方式都不一样哦 遮罩层: 设两个id <style type ...
随机推荐
- runtime - 消息发送(objc_msgSend)
http://www.jianshu.com/p/95c8cb186673 在OC中,我们对方法的调用都会被转换成内部的消息发送执行对objc_msgSend方法的调用,掌握好消息发送,可以让我们在编 ...
- 编程语言与dsl
通用编程语言面向的是计算机通用功能: 即数据.计算.资源管理及数据与计算的组合方式: 数据与计算.计算与计算的组合方式是通用语言的问题域,是通用编程语言的在计算机硬件的基础上对问题解决通用描述方式: ...
- tomcat catalina
脚本catalina用于启动和关闭tomcat服务器,是最关键的脚本 在tomcat里有此文件 写这个脚本的人为什么命名为catalina一开始我还以为是其初恋女友,后来才知道原来是一个小岛的名字.
- PinPoint使用教程
选择该应用的展示边界 InBound:3 OutBound:3 基本概念 APM (Application Performance Management/应用性能管理)工具 为大规模分布式系统. 开发 ...
- Eclipse中将java类打成jar包形式运行
记录一次帮助小伙伴将java类打成jar包运行 1.创建java project项目 file > new > project > java project 随便起一个项目名称,fi ...
- round.606.div2
A. Happy Birthday, Polycarp! 这个题意我确实没有看懂. 沃日,我懂了,我感觉我似乎都能切掉这题. B. Make Them Odd 这个我也能看懂.
- 使用solr将CSV/XML/DB/JSON数据发布为Rest Service
Download http://lucene.apache.org/solr/downloads.html Apache Solr入门基础——Windows下安装与配置 https://blog.cs ...
- Hibernate的批量查询——HQL
HQL(Hibernate Query Language)查询: 1.查询所有学生信息: public static void testSel() { Session session = Hibern ...
- plotly-dash 简单使用(一)
plotly-dash 是一个很不错的dashboard 开发平台,基于python 编写,提供了很便捷的dashboard 开发模型 同时扩展上也比较灵活我们可以编写自己的组件. 以下是一个简单的项 ...
- 常用方法 DataTable转换为Html
点击单元格 可以输出行和列,这个功能可以在一些特殊的地方用 public static string GetHtmlString(DataTable dt) { StringBuilder sb = ...