jquery弹出关闭遮罩层实例
<!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>jquery简便实现遮罩层--我们</title>
<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
</head>
<body>
<div ><input type="button" onclick="show_www.jb51.net()" value="显示遮罩层" /> 显示遮罩层后点击右上角关闭</div>
<div ></div>
<div >我们</div>
<div >www.jb51.net</div>
<div >keleyi</div>
<div >www.jb51.net</div>
<div >我们</div>
<div >我们 返回顶部</div>
<div >a</div>
<div >jquery</div>
<div ><a href="http://www.jb51.net/a/bjac/6f008786225269ac.htm" target="_blank">原文</a></div>
<div >www.jb51.net</div>
<div >完整代码</div>
<div ><div id="donwmsg_content" >
<ul>
<li class="ll"><a href="http://www.jb51.net/768f469b95b61487.htm" >单行文字间歇向上滚动</a></li>
<li><a href="http://www.jb51.net/a6d651710217f7a0.htm" >jquery ui修饰title气泡</a></li>
<li><a href="http://www.jb51.net/f0eb8c02085b10d.htm" >jquery清空textarea等输入框</a></li>
<li><a href="http://www.jb51.net/939631bb07adb4dc.htm" >jquery关灯特效</a></li>
<li><a href="http://www.jb51.net/7e8897e5ec0849e9.htm" >可改变大小div层</a></li>
</ul>
<div class="lb"><a href="http://www.jb51.net/jquery/" target="_blank">jquery</a> <a href="http://www.jb51.net/javascript/" target="_blank">javascript</a> <a href="http://www.jb51.net/cms/" target="_blank">cms</a> </div>
</div></div>
<script type="text/javascript">
$("<div id="div_brg_www.jb51.net"><img id="close_www.jb51.net" src="http://www.jb51.net/images/nav-close.png" /></div>").css({
position:"absolute",
top:0,
left:0,
backgroundcolor:"#004400",
opacity:0.5,
zindex:300
})
.height($(document).height())
.width($(document).width()).hide().appendto("body")
//需要遮罩的时候
function show_www.jb51.net() {
$("#div_brg_www.jb51.net").show();
}
$("#close_ke"+"leyi_com").click(function () {
//取消遮罩的时候
$("#div_brg_www.jb51.net").hide();
}
)</script>
</body>
</html>
其中用到两个jquery方法：
一、show()：如果被选元素已被隐藏，则显示这些元素
语法
$(selector).show(speed,callback)
speed
可选。规定元素从隐藏到完全可见的速度。默认为 "0"。
可能的值：
毫秒 （比如 1500）
"slow"
"normal"
"fast"
在设置速度的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。
callback
可选。show 函数执行完之后，要执行的函数。
除非设置了 speed 参数，否则不能设置该参数。
提示：如果元素已经是完全可见，则该效果不产生任何变化，除非规定了 callback 函数。
注释：该效果适用于通过 jquery 隐藏的元素，或在 css 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。
二、hide():如果被选的元素已被显示，则隐藏该元素。
语法
$(selector).hide(speed,callback)
speed
可选。规定元素从可见到隐藏的速度。默认为 "0"。
可能的值：
毫秒 （比如 1500）
"slow"
"normal"
"fast"
在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。
callback
可选。hide 函数执行完之后，要执行的函数。
除非设置了 speed 参数，否则不能设置该参数。
提示：如果元素已经是完全可见，则该效果不产生任何变化，除非规定了 callback 函数。
相关推荐
-
Jquery实现遮罩层的方法
本文实例讲述了Jquery实现遮罩层的方法.分享给大家供大家参考.具体如下: 1.假设#main为页面body中的最外层Div标签 2.背景被遮罩后,显示的弹出窗(默认是不显示的,所包含的CSS这里就不贴了): <!-- Status Bar Start --> <div id="warning-dialog" class="status warning center-top no-display"> <p class="cl
-
jQuery遮罩层实现方法实例详解(附遮罩层插件)
本文实例分析了jQuery遮罩层实现方法.分享给大家供大家参考,具体如下: 1 背景半透明遮罩层样式 需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式: /* 半透明的遮罩层 */ #overlay { background: #000; filter: alpha(opacity=50); /* IE的透明度 */ opacity: 0.5; /* 透明度 */ display: none; position: absolute; top: 0px; lef
-
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
本文实例讲述了jquery实现点击其他区域时隐藏下拉div和遮罩层的方法.分享给大家供大家参考,具体如下: 为了更好的用户体验,在做下拉获取其他有弹出层的时候,当展开下拉时,要做到点击其他区域也能自动隐藏收起下拉和遮罩层,这样的效果用一段js就可以了. 以下图为例的一个下拉菜单为参考: 效果实现源码: $(document).bind('click', function(e) { var e = e || window.event; //浏览器兼容性 var elem = e.target ||
-
jquery实现简单的遮罩层
本文实例讲解了jquery遮罩层,包括遮罩层的不同样式实现.mask实现遮罩层等,分享给大家供大家参考,具体内容如下 一.jQuery实现遮罩层的不同样式 1.1 背景半透明遮罩层样式 需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式: /* 半透明的遮罩层 */ #overlay { background: #000; filter: alpha(opacity=50); /* IE的透明度 */ opacity: 0.5; /* 透明度 */ displa
-
jQuery+AJAX实现遮罩层登录验证界面（附源码）
JQuery遮罩层登录界面效果的实现,AJAX实现登录验证,文章尾有完整示例源码下载,欢迎大家学习研究. 操作系统:Windwos7 Ultimate 开发工具:Visual Studio 2010 数据库:Sql Server 2005 测试浏览器:IE8.FF3.6.8.Google Chrome (IE8中弹出登录层后会出现竖拉条,其他两种没有出现,那个竖拉条可以在JS中通过修改数值让其不出现,但是下面会出现白边,越来越觉得IE有点那个了......) 1.预览 1)登录前 2)点击登录显
-
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
最近项目遇到了遮罩层的一些问题,总结一下: 弹出遮罩层 遮罩层弹出有非常多的方法,这里只写出本人用的代码,使用jq操作dom的方法进行实现的. <style>.box{position:absolute;width:100%;left:50%;height:auto;z-index:100;background-color:#f5f5f5;border:1px #ddd solid;padding:1px;}</style><div id="bg" v-c
-
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层 二是点击弹出 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="htt
-
JQuery 遮罩层实现(mask)实现代码
其中有mask()和unmask()这两个方法,这两个方法在指定的元素上添加一个遮罩层和一个提示消息实现,增加客户体验.由于最近做项目的时候,发现有时为了使用这一两个方法需要引入一个比较"庞大"的Extjs进来,觉得有点不划算,于是自己用jquery实现了一个比较简单mask.unmask方法来实现该效果.大家知道jquery是一个优秀的javascript框架,不但体积小而且使用方便,我现在逐渐将系统中使用Extjs实现的代码或组建全部更换成Jquery来实现.好了不多说,上我的代码
-
轻量级网页遮罩层jQuery插件用法实例
本文实例讲述了轻量级网页遮罩层jQuery插件用法.分享给大家供大家参考.具体如下: 使用jQuery的好处是很多人为它写一些组件,而在项目所需用到功能也都可以找到一些组件去完成. 现在又这样一个需求当用户点击一个按钮后不允许用户进行任何的操作,取而代之的是弹出一个遮罩层显示一个loading提示框,效果如下. 其实这个需求很简单,但很多组件体积相对这个需求来说太大了,在网上瞎溜达了找到了一个还不错的组件,作者是上面也没有写.现在就来分析一下这个组件的源码和使用 /** * @部分参数说明 */
-
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jquery实现遮罩层的简单实例(就是弹出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>
-
jQuery阻止移动端遮罩层后页面滚动
css代码: .ovfHiden{overflow: hidden;height: 100%;} jquery: $(".header_right").click(function(){ $('html,body').addClass('ovfHiden'); //使网页不可滚动 $(".searchbox").show(); }) $(".yg-close").click(function(){ $('html,body').removeCla