<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mask</title>
<style type="text/css">
*{margin:0;padding:0;}
.mask{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
z-index:100;
background:rgba(180,60,0,.4);
display: none;
}
.mask .dialog{
margin:200px auto;
width:350px;
height:150px;
border:1px solid #ccc;
background: #fff;
box-shadow: 0 0 5px #F97C0F;
padding:20px;
text-align: center;
background:#F97C0F;
}
.mask .dialog p{
font-size:35px;
color:#fff;
}
.mask .dialog div input{
outline: 0;
background: #FBBA81;
height: 50px;
line-height: 50px;
font-size: 25px;
border:none;
border-bottom: 1px solid #333;
text-align: center;
}
a{color:#000;font-size: 18px;}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="mask">
<div class="dialog">
<p>☹</p>

<div contenteditable="true">
<input type="text" name="" value="What do you want?">
</div>
</div>
</div>
<p><a href="#" id="open">Open Dialog</a></p>
<script type="text/javascript">
$(function(){
$("#open").click(function(e){
$(".mask").show();
});
$(".dialog").click(function(e){

if(e){//ff
e.stopPropagation();
console.log("e");
}
else{//ie
window.event.cancelBubble = true;
}
});
$(".mask").click(function(e){
// if(e.target==this){
// $(".mask").hide();
// }
$(".mask").hide();

});
});
</script>
</body>
</html>

jQuery遮罩层效果的更多相关文章

  1. jQuery弹出遮罩层效果完整示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

  3. 纯CSS3写的10个不同的酷炫图片遮罩层效果

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  4. 利用div实现遮罩层效果

    利用div实现遮罩层效果就是利用一个全屏.半透明的div遮住页面上其它元素,典型的例子就是百度的登录界面.下面贴出示例代码: <!DOCTYPE html> <html> &l ...

  5. html+css源码之实现登录弹出框遮罩层效果

    在web开发中,很多网站都做了一些特别炫丽的效果,比如用户登录弹框遮罩层效果,本文章向大家介绍css如何实现登录弹出框遮罩层效果,需要的朋友可以参考一下本文章的源代码. html+css实现登录弹出框 ...

  6. jquery图片放大镜和遮罩层效果

    图片放大镜效果将借助于jqzoom插件,遮罩层借助于thickbox插件. 1.引入样式表 /*整体样式*/ <link rel="stylesheet" href=&quo ...

  7. jQuery遮罩层登录对话框

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

  8. jQuery遮罩层的实现

    遮罩层其实就是一个占据整个页面的半透明效果的页面元素,一般用div实现.页面中实现遮罩层,无非就是为了让用户只能操作弹出窗口的内容,而不允许操作弹出窗口外的内容. 在实现时,我使用了两个div,一个遮 ...

  9. jQuery遮罩层插件

    在网页上常常遇到须要等待非常久的操作,比方导出报表等.为了预防用户点击其它操作或者多次点击同个功能,须要用遮罩层把页面或者操作区盖住.防止用户进行下一步操作.同一时候能够提高界面友好度,让用户知道操作 ...

随机推荐

  1. Android开发--布局

    一:LinearLayout  1.线性布局,这个东西,从外框上可以理解为一个div,他首先是一个一个从上往下罗列在屏幕上.每一个LinearLayout里面又可分为垂直布局(android:orie ...

  2. scrollView实现基础中心点缩放及与UIPageControl结合使用

    一般来说scrollView与UIPageControl都是结合使用,因为在使用滚动视图的时候 ,使用UIPageControl,用户可以 清楚 的明白显示的内容有多少页,如果 没有的话,总不能让用户 ...

  3. innobackupex的安装

    innobackupex的安装方法有3种: 通过RPM包安装: 通过源码包安装: 通过二进制包安装. 第3种方法最简单,这里只介绍它.以下是安装步骤: 打开官方下载链接: Version默认是最新版本 ...

  4. java GZIP压缩和解压

    最近碰到了一个按GZIP解压指定的输入流数据,备份下 import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream ...

  5. Oracle Database 11G R2 标准版 企业版 下载地址（转）

    转自:http://blog.itpub.net/628922/viewspace-759245/ 不需要注册,直接复制到迅雷或其他下载软件中即可下载. oracle 11.2.0.3 下载地址: L ...

  6. ios category，protocol理解

    category: 向现有的类中增加方法,同时提供方法的实现,现有类不需要做任何改动. protocol:(相当于Java或C#中的接口interface,当很多类都要需要类似的方法,但是方法具体实现 ...

  7. window删除文件时提示: 源文件名长度大于系统支持的长度

    有时候删除windows中的目录的时候,会出现"源文件名长度大于系统支持的长度", 而导致不能删除, 作为一个程序猿, 怎么可以被这个折服呢, 原理: 利用 Java  递归删除文 ...

  8. Sql 邮件发送

    select name from msdb.dbo.sysmail_profile --邮件发送日志 SELECT * FROM msdb.dbo.sysmail_event_log delete F ...

  9. 错误：Method not found: 'Void System.Web.UI.ScriptResourceDefinition.set_LoadSucce

    vs2012开发,再把.net 4.5降成4.0.部署到2003 服务器上就报错了. 在网上查了下,老外说:这个方法.net4.0不支持. 后面发现是发布方式错了,用项目里的发布,不要直接拷贝文件过去 ...

  10. 绕过/*,web.xml直接访问jsp

    web.xml中如果配置了/* 全匹配,那么不能用servet去响应页面返回了,因为全都被会/*拦截. <servlet> <servlet-name>validateAuth ...