jquery弹出关闭遮罩层实例

 更新时间:2013年08月06日 11:01:37   作者:   我要评论

这篇文章介绍了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="//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="//www.jb51.net/768f469b95b61487.htm" >单行文字间歇向上滚动</a></li>
<li><a href="//www.jb51.net/a6d651710217f7a0.htm" >jquery ui修饰title气泡</a></li>
<li><a href="//www.jb51.net/f0eb8c02085b10d.htm" >jquery清空textarea等输入框</a></li>
<li><a href="//www.jb51.net/939631bb07adb4dc.htm" >jquery关灯特效</a></li>
<li><a href="//www.jb51.net/7e8897e5ec0849e9.htm" >可改变大小div层</a></li>
</ul>
<div class="lb"><a href="//www.jb51.net/jquery/" target="_blank">jquery</a>   <a href="//www.jb51.net/javascript/" target="_blank">javascript</a>   <a href="//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="//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插件的基本知识

    这篇文章主要介绍了从如何写JQuery插件,需要注意的事项,还有必须要做的步骤,看过这个文章相信你会明白如何写好一个JQuery插件
    2013-11-11
  • jquery获取file表单选择文件的路径、名字、大小、类型

    jquery获取file表单选择文件的路径、名字、大小、类型

    今天小编就为大家分享一篇关于jquery获取file表单选择文件的路径、名字、大小、类型,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • jquery 无限级下拉菜单的简单实现代码

    jquery 无限级下拉菜单的简单实现代码

    本篇文章主要是对jquery 无限级下拉菜单的简单实现代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • jQuery实现简单下拉导航效果

    jQuery实现简单下拉导航效果

    这篇文章主要介绍了jQuery实现简单下拉导航效果,通过简单的元素遍历与样式替换实现下拉导航的功能,非常具有实用价值,需要的朋友可以参考下
    2015-09-09
  • Jquery为DIV添加click事件的简单实例

    Jquery为DIV添加click事件的简单实例

    下面小编就为大家带来一篇Jquery为DIV添加click事件的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • Jquery ThickBox插件使用心得(不建议使用)

    Jquery ThickBox插件使用心得(不建议使用)

    最近发现一个不错的基于jquery的插件thickBox ,感觉比facebox好用。但因为jquery官方不推荐使用。所以这个只是学习的朋友,不建议使用这个。
    2010-09-09
  • Chosen 基于jquery的选择框插件使用方法

    Chosen 基于jquery的选择框插件使用方法

    Chosen 是一个JavaScript插件,它能让丑陋的、很长的select选择框变的更好看、更方便。目前,它支持 jQuery 和 Prototype 两种JavaScript引擎。
    2012-05-05
  • jquery中的常用事件bind、hover、toggle等示例介绍

    jquery中的常用事件bind、hover、toggle等示例介绍

    这篇文章主要介绍了jquery中常用的事件,比如$(document).ready()、bind、hover、toggle、click等等,并有示例,易于学习
    2014-07-07
  • jQuery实现带动画效果的多级下拉菜单代码

    jQuery实现带动画效果的多级下拉菜单代码

    这篇文章主要介绍了jQuery实现带动画效果的多级下拉菜单代码,可实现点击渐隐渐显效果,涉及jQuery页面元素的遍历及链式操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • jquery+javascript编写国籍控件

    jquery+javascript编写国籍控件

    本文给大家分享一个自己编写的使用jquery+javascript实现的国籍控件,效果非常不错,这里推荐给大家。
    2015-02-02

最新评论