在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解决弹出层的问题的更多相关文章

  1. jquery制作弹出层带遮罩效果,点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  2. jQuery Dialog弹出层对话框插件

    Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...

  3. jquery 简单弹出层(转)

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...

  4. jQuery.reveal弹出层

    jQuery.reveal弹出层使用 最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说 ...

  5. jquery 简单弹出层

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css .z-popup-overlay{ width:100%; min-height: 100%; height:800px; pos ...

  6. jQuery.reveal弹出层使用

    最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说了算. 这个插件是基于Jquery实现 ...

  7. jquery智能弹出层,自己主动推断位置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jQuery layer弹出层插件 http://layer.layui.com/直接上官网学

    在许多网站中,经常用到弹出层,有时候为了达到更好的用户体验,你将写繁琐的css跟js,这款 jquery-layer可以让你想到即可做到的web弹窗/层js组件.layer侧重于用户灵活的自定义,为不 ...

  9. 写了一个jquery的 弹出层插件。

    下载地址:http://pan.baidu.com/s/1eQ26CMm ps:ajax加载做的,要有环境才能正常运行哦! //这是一个以ajax加载显示弹出层插件  参数(option): widt ...

随机推荐

  1. vim的保存误认为utf8问题

     用vim改脚本改到一处写到'太原':w一下,再打开,,结果给乱码了...我默认sql是用cp936的,,,想到到和记录本的联通问题一样....   可能会问我为什么不用utf8,,,,因为ms200 ...

  2. Cocos2d-android (05) 渐变动画(颜色,淡入淡出。。。)

    淡入淡出.颜色渐变及动作重复执行 import org.cocos2d.actions.base.CCRepeatForever; import org.cocos2d.actions.interva ...

  3. STL六大组件之——分配器(内存分配,好深奥的东西)

    SGI设计了双层级配置器,第一级配置器直接使用malloc()和free(),第二级配置器则视情况采用不同的策略:当配置区块超过128bytes时,视之为“足够大”,便调用第一级配置器:当配置区小于1 ...

  4. C# 关闭 Excel进程

    namespace ExcelTest   {       class DataOutput       {           static void Main(string[] args)     ...

  5. 笔记:修改centos的IP地址相关配置

    最近碰到不少认识的人问相关问题 索性做个笔记 图个方便 修改eth0的网卡配置vi /etc/sysconfig/network-scripts/ifcfg-eth0DEVICE=eth0BOOTPR ...

  6. remoting blazeds 实施步骤

    remoting 实施步骤 1.创建 --web project 和 -- Flex project 2.在web project 下创建 -- com.HelloRemoting: package ...

  7. (转)QR二维码生成及原理

    二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型:比如:字符,数字, ...

  8. [WebService]之Schema

    schema入门 1:schema出现的目的是通过一个更加合理的方式来编写xml文件的限制(以XML语法的方式) 2:schema可以使用命名空间来支持多个名称相同的元素 3:schema可以很好的的 ...

  9. HDU ACM 1515 Anagrams by Stack

    Anagrams by Stack Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  10. [转] 苹果所有常用证书,appID,Provisioning Profiles配置说明及制作图文

    转自holydancer的CSDN专栏,原文地址:http://blog.csdn.net/holydancer/article/details/9219333 首先得描述一下各个证书的定位,作用,这 ...