基于jQuery实现点击弹出层实例代码
2016-01-01 00:00
971 查看
jquery实现点击链接弹出层效果:本例实现的主要原理:jquery操作DOM元素。对层样式的设置。将display:设置为none;让层隐藏;
代码实例如下:
以上代码中,点击链接可以弹出隐藏的层,再点击任何地方就可以隐藏此层。
本段代码简单易懂,写的不好还请各位大侠见谅,希望本文分享能够给大家带来帮助。
jQuery点击自身以外地方关闭弹出层的简单实例
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
jquery实现点击弹出层效果的简单实例
jquery原创弹出层折叠效果点击折叠弹出一个层
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net" /> <title>子选择器</title> <style type="text/css"> #choice_list_district{ height:50px; } #tab td{ cursor:pointer; } #divobj{ position:absolute; width:200px; height:200px; background:blue; border:1px solid block; display:none; z-index:9999; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function (){ $("#choice_list_district a").click(function(e){ if($("#divobj").css("display")=="none"){ e.stopPropagation(); var offset=$(e.target).offset(); $("#divobj").css({top:offset.top+$(e.target).height()+"px",left:offset.left}); $("#divobj").show(); } else{ $("#divobj").hide(); } }); $(document).click(function(event){ $("#divobj").hide(); }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <div id="choice_list_district"> <a href="#">出来层</a> </div> <div id="divobj"></div> </div> </form> </body> </html>
以上代码中,点击链接可以弹出隐藏的层,再点击任何地方就可以隐藏此层。
本段代码简单易懂,写的不好还请各位大侠见谅,希望本文分享能够给大家带来帮助。
您可能感兴趣的文章:
点击弹出层外区域关闭弹出层jquery特效示例jQuery点击自身以外地方关闭弹出层的简单实例
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
jquery实现点击弹出层效果的简单实例
jquery原创弹出层折叠效果点击折叠弹出一个层
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
相关文章推荐
- jQuery选择器
- Web前端开发实战3:二级下拉式菜单之jQuery实现
- jQuery实现返回顶部功能
- [jQuery] Cannot read property ‘msie’ of undefined错误的解决方法
- jQuery的三种$()
- Jquery Table 的基本操作
- jquery学习初始篇
- (function($){})(jQuery)和(jQuery)(function($){})
- jquery serialize()
- jquery serialize()
- jquery去标签正则表达式【简单】
- Jquery JSOPN在WebApi中的问题
- jQuery EasyUI中datagrid多列展示慢优化
- JQuery图表框架之Highcharts
- 对 jQuery 中 data 方法的误解分析
- 导航菜单固定头部跟随屏幕滚动jQuery插件
- Jquery 使用JSOPN实例
- 表单实时校验插件——jquery.validateForm.js(v.2.0)
- JQuery replace 替换全部
- 用javascript/jQuery给CKEditor取值/赋值