当前位置:  编程技术>WEB前端

jQuery点击自身以外地方关闭弹出层的简单实例

    来源: 互联网  发布时间:2014-08-25

    本文导语:  主要功能是点击显示,然后通过点击页面的任意位置都能关闭显示效果,主要是$(document).click的作用 开发过程中经常有一些弹出层,弹出后要在点击页面其他地方时自动关闭,下面是实现代码: HTML代码: 代码如下:clickshow-areaCSS代码...

主要功能是点击显示,然后通过点击页面的任意位置都能关闭显示效果,主要是$(document).click的作用

开发过程中经常有一些弹出层,弹出后要在点击页面其他地方时自动关闭,下面是实现代码:

HTML代码:

代码如下:

click

show-area


CSS代码:
.hide{display:none;}

JS代码

代码如下:

$(document).ready(function(){
$("div.down").click(function(e){
e.stopPropagation();
$("div.con").removeClass("hide");
});
$(document).click(function(){
if(!$("div.con").hasClass("hide")){
$("div.con").addClass("hide");
}
});
});

OK,自己本地测试下吧,css样式自己修改!

    
 
 

您可能感兴趣的文章:

  • jquery使用jquery.zclip插件复制对象的实例教程
  • JQuery验证特殊字符实例
  • jquery检验实例-改变错误提示信息的位置
  • textarea显示成label的样式 jquery实例
  • jQuery实现回车键(Enter)切换文本框焦点的代码实例
  • jquery修改属性值实例代码(设置属性值)
  • Jquery each方法跳出循环,并获取返回值(实例讲解)
  • jquery等宽输出文字插件的实例代码
  • jquery 回车事件的实例分享
  • jquery 获取dom固定元素 添加样式的简单实例
  • Jquery 获取元素位置序号的实例代码
  • jquery获得表单所有数据的实例分享
  • jQuery回车键事件实例代码
  • Jquery 键盘按键监听与滑动效果的实例
  • jquery实现弹出div,始终显示在屏幕正中间的简单实例
  • jquery导航固定效果实例
  • jquery 延迟执行的实例分享
  • JQuery validate日期比较实例
  • Jquery如何获取新浪天气预报?实例代码
  • jquery 网页自动播放声音实例
  • jquery fancybox ie6不显示关闭按钮的解决办法
  • jQuery实现文本框只能输入数字/关闭输入法状态
  • jquery宽屏特效之可关闭两边飘浮对联广告
  • jquery倒计时广告特效代码 可关闭的js倒计时
  • jquery弹出关闭遮罩层实现代码
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery如何实现点击页面获得当前点击元素的id或其他信息
  • jquery 点击按钮弹出层 点击空白处隐藏层的实现代码
  • 点击表单提交时出现jQuery没有权限的解决方法
  • jquery实现点击消失的代码
  • Jquery点击高亮显示的实现代码
  • 使用JS或jQuery模拟鼠标点击a标签事件代码
  • jQuery回车键绑定点击事件示例
  • jquery获取当前点击对象的value方法
  • jQuery实现当按下回车键时绑定点击事件
  • jquery中交替点击事件的实现代码
  • Jquery如何实现点击时高亮显示代码
  • jquery中交替点击事件toggle方法的使用示例
  • jQuery模拟点击A标记示例参考
  • JQuery实现动态表格点击按钮表格增加一行
  • Jquery模拟超链接点击效果的代码示例
  • 网络技术 iis7站长之家
  • jquery下拉菜单效果 jquery点击弹出下拉菜单的例子
  • jquery 点击文本框复制内容到剪贴板的实现代码
  • Jquery 点击按钮自动高亮实现原理及代码
  • jQuery循环判断点击某节点
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3