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 相关文章推荐
图片完美缩放
Sep 07 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 Javascript
防止Layui form表单重复提交的实现方法
Sep 10 Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 Javascript
JS面试题中深拷贝的实现讲解
May 07 Javascript
实例分析javascript中的异步
Jun 02 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 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
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
angular简介和其特点介绍
2015/01/29 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
vue实现图片上传功能
2020/05/28 Javascript
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
Python自动调用IE打开某个网站的方法
2015/06/03 Python
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
python re模块和正则表达式
2021/03/24 Python
劲霸男装广告词
2014/03/21 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript
JVM之方法返回地址详解
2022/02/28 Java/Android