用jQuery解决弹出层的问题
在BS 项目中 经常需要用到这种弹出层。
做这种弹出层一般都会遇到下面几个问题:
0,弹出层必须定义在input的下边显示。
1,点击input弹出div层。
2,点击div层外面任何地方,关闭div层。
3,ie6下,div层与下拉框的优先级问题。
下面这个例子就是解决这些问题的,大家可以参考参考,有什么更好的解决方案,请留言。
超级简单版 演示:
http://cssrain.cn/demo/popDiv/easyPopDiv.html
实例版 演示:
http://cssrain.cn/demo/popDiv/popDiv.html
下载:
http://cssrain.cn/demo/popDiv/popDiv.rar
此弹出框特点:
1,弹出层出现在 文本框 下面.
2,点击弹出层内部 不关闭层,点击外面关闭弹出层.
3,ie6依然能遮住下拉框.
当时遇到的问题以及解决方案 :
1,获取文本框的高度,当初用的.height(),结果发现有问题,border等都没算进去,后来改用.outerHeight(true)解决。
2,阻止事件冒泡,当初用的return false;结果弄的多选框不能选了,
因为return false包括e.stopPropagation()和e.preventdefault(),e.preventdefault()会阻止元素的默认动作,
所以多选框不能选中了。改用e.stopPropagation()后,一切正常。
3,$("body")和$(document)的区别,因为body的高度未知,所以导致click()事件无效,改为$(document) 解决。
4,ie6下,层与下拉框的问题,采用jquery.bigframe插件解决。
本篇文章来源于 cssrain.cn 原文链接:http://www.cssrain.cn/article.asp?id=1317
用jQuery解决弹出层的问题的更多相关文章
- jquery制作弹出层带遮罩效果,点击阴影部分层消失
jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...
- jQuery Dialog弹出层对话框插件
Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...
- jquery 简单弹出层(转)
预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...
- jQuery.reveal弹出层
jQuery.reveal弹出层使用 最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说 ...
- jquery 简单弹出层
预定义html代码:没有 所有代码通过js生成和移除. 预定义css .z-popup-overlay{ width:100%; min-height: 100%; height:800px; pos ...
- jQuery.reveal弹出层使用
最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说了算. 这个插件是基于Jquery实现 ...
- jquery智能弹出层,自己主动推断位置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery layer弹出层插件 http://layer.layui.com/直接上官网学
在许多网站中,经常用到弹出层,有时候为了达到更好的用户体验,你将写繁琐的css跟js,这款 jquery-layer可以让你想到即可做到的web弹窗/层js组件.layer侧重于用户灵活的自定义,为不 ...
- 写了一个jquery的 弹出层插件。
下载地址:http://pan.baidu.com/s/1eQ26CMm ps:ajax加载做的,要有环境才能正常运行哦! //这是一个以ajax加载显示弹出层插件 参数(option): widt ...
随机推荐
- ANDROID5.0触摸屏校准
1.校准原理: 1)首先生成校准用的参数,可以适用tslib生成校准参数,也可以使用校准app生成:使用校准app进行校准对使用者要求比较低,使用者可以不用学习复杂的命令:本文使用app方式 2)生成 ...
- linux shell中的 #!/bin/bash
#!/bin/bash是指此脚本使用/bin/bash来解释执行. 其中,#!是一个特殊的表示符,其后,跟着解释此脚本的shell路径. bash只是shell的一种,还有很多其它shell,如:sh ...
- hdu 1429(bfs+状态压缩)
题意:容易理解,但要注意的地方是:如果魔王回来的时候刚好走到出口或还未到出口都算逃亡失败.因为这里我贡献了一次wa. 分析:仔细阅读题目之后,会发现最多的钥匙数量为10把,所以把这个作为题目的突破口, ...
- Yii笔记---redirect重定向
Yii的redirect方法在CControler与CHttpRequest之中都有被定义,CController中的redirect调用了CHttpRequest中的redirect方法.我们平常调 ...
- 关于python中的unicode字符串的使用
基于python2.7中的字符串: unicode-->编码encode('utf-8')-->写入文件 读出文件-->解码decode('utf-8')-->unicode ...
- nagios高可用性设置
1. 前言 如何来实现nagios监控系统的高可用,监控是很重要的,在关键时刻进行通知报警,通知人员进行相应的处理. 在进行配置的时候,需要配置两台相同服务的nagios服务器,配置相同,同时在运行, ...
- Div高度百分比
有时候设置高度百分比,没有效果. 原因是父元素没有设置高度. 父元素可以设置高度为具体的px.或是100%等百分比. 这样子元素再能根据百分比来设置高度. <style type="t ...
- PHPCMS V9实现硬件地址MAC绑定访问技术实现
目的:会员登录需要 用户名.密码.身份识别码(新增字段) 效果: 解决方法: 目前数据库中macaddress字段已经添加,修改了phpcms\modules\member\index.php 63 ...
- linux常用的一些命令(不断增加中)
linux 下重启 apache: httpd -k restart 下面这些大多命令都可以在<鸟哥私房菜>的服务器中的“常用网络指令”和基础中的“程序与资源管理”中找到ps -aux 这 ...
- c++builder Color
procedure ExtractRGB(const Color: Graphics.TColor; out Red, Green, Blue: Byte); var RGB: Windows.TCo ...