用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 ...
随机推荐
- vim的保存误认为utf8问题
用vim改脚本改到一处写到'太原':w一下,再打开,,结果给乱码了...我默认sql是用cp936的,,,想到到和记录本的联通问题一样.... 可能会问我为什么不用utf8,,,,因为ms200 ...
- Cocos2d-android (05) 渐变动画(颜色,淡入淡出。。。)
淡入淡出.颜色渐变及动作重复执行 import org.cocos2d.actions.base.CCRepeatForever; import org.cocos2d.actions.interva ...
- STL六大组件之——分配器(内存分配,好深奥的东西)
SGI设计了双层级配置器,第一级配置器直接使用malloc()和free(),第二级配置器则视情况采用不同的策略:当配置区块超过128bytes时,视之为“足够大”,便调用第一级配置器:当配置区小于1 ...
- C# 关闭 Excel进程
namespace ExcelTest { class DataOutput { static void Main(string[] args) ...
- 笔记:修改centos的IP地址相关配置
最近碰到不少认识的人问相关问题 索性做个笔记 图个方便 修改eth0的网卡配置vi /etc/sysconfig/network-scripts/ifcfg-eth0DEVICE=eth0BOOTPR ...
- remoting blazeds 实施步骤
remoting 实施步骤 1.创建 --web project 和 -- Flex project 2.在web project 下创建 -- com.HelloRemoting: package ...
- (转)QR二维码生成及原理
二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型:比如:字符,数字, ...
- [WebService]之Schema
schema入门 1:schema出现的目的是通过一个更加合理的方式来编写xml文件的限制(以XML语法的方式) 2:schema可以使用命名空间来支持多个名称相同的元素 3:schema可以很好的的 ...
- HDU ACM 1515 Anagrams by Stack
Anagrams by Stack Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- [转] 苹果所有常用证书,appID,Provisioning Profiles配置说明及制作图文
转自holydancer的CSDN专栏,原文地址:http://blog.csdn.net/holydancer/article/details/9219333 首先得描述一下各个证书的定位,作用,这 ...