jquery弹出关闭遮罩层实例


Posted in Javascript onAugust 06, 2013
<!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_3water.com()" value="显示遮罩层" /> 显示遮罩层后点击右上角关闭</div>
<div ></div>
<div >三水点靠木</div>
<div >3water.com</div>
<div >keleyi</div>
<div >3water.com</div>
<div >三水点靠木</div>
<div >三水点靠木 返回顶部</div>
<div >a</div>
<div >jquery</div>
<div ><a href="https://3water.com/a/bjac/6f008786225269ac.htm" target="_blank">原文</a></div>
<div >3water.com</div>
<div >完整代码</div>
<div ><div id="donwmsg_content" >
<ul>
<li class="ll"><a href="https://3water.com/768f469b95b61487.htm" >单行文字间歇向上滚动</a></li>
<li><a href="https://3water.com/a6d651710217f7a0.htm" >jquery ui修饰title气泡</a></li>
<li><a href="https://3water.com/f0eb8c02085b10d.htm" >jquery清空textarea等输入框</a></li>
<li><a href="https://3water.com/939631bb07adb4dc.htm" >jquery关灯特效</a></li>
<li><a href="https://3water.com/7e8897e5ec0849e9.htm" >可改变大小div层</a></li>
</ul>
<div class="lb"><a href="https://3water.com/jquery/" target="_blank">jquery</a>   <a href="https://3water.com/javascript/" target="_blank">javascript</a>   <a href="https://3water.com/cms/" target="_blank">cms</a> </div>
</div></div> 
<script type="text/javascript">
$("<div id="div_brg_3water.com"><img id="close_3water.com" src="https://3water.com/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_3water.com() {
$("#div_brg_3water.com").show();
}
$("#close_ke"+"leyi_com").click(function () {
//取消遮罩的时候
$("#div_brg_3water.com").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 函数。

Javascript 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
Javascript优化技巧(文件瘦身篇)
Jan 28 Javascript
理解JavaScript中的对象 推荐
Jan 09 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 Javascript
详解vue-resource promise兼容性问题
Jun 20 Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 Javascript
浅谈javascript错误处理
Aug 11 Javascript
JS实现无限轮播无倒退效果
Sep 21 Javascript
jquery批量控制form禁用的代码
Aug 06 #Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 #Javascript
intro.js 页面引导简单用法 分享
Aug 06 #Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
Aug 06 #Javascript
IE下JS读取xml文件示例代码
Aug 05 #Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 #Javascript
php与js的区别是什么
Aug 05 #Javascript
You might like
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
js获取div高度的代码
2008/08/09 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
keras中的backend.clip用法
2020/05/22 Python
什么是python的id函数
2020/06/11 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
super关键字的用法
2012/04/10 面试题
中学生在校期间的自我评价分享
2013/11/13 职场文书
服务行业个人求职的自我评价
2013/12/12 职场文书
自动化毕业生专业自荐书范文
2014/02/04 职场文书
银行职员自我鉴定
2014/04/20 职场文书
中学生演讲稿
2014/04/26 职场文书
小学生倡议书范文
2014/05/13 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
暑期培训班招生方案
2014/08/26 职场文书
搞笑婚前保证书
2015/02/28 职场文书
党小组推荐意见
2015/06/02 职场文书
Redis读写分离搭建的完整步骤
2021/09/14 Redis