在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. ANDROID5.0触摸屏校准

    1.校准原理: 1)首先生成校准用的参数,可以适用tslib生成校准参数,也可以使用校准app生成:使用校准app进行校准对使用者要求比较低,使用者可以不用学习复杂的命令:本文使用app方式 2)生成 ...

  2. linux shell中的 #!/bin/bash

    #!/bin/bash是指此脚本使用/bin/bash来解释执行. 其中,#!是一个特殊的表示符,其后,跟着解释此脚本的shell路径. bash只是shell的一种,还有很多其它shell,如:sh ...

  3. hdu 1429(bfs+状态压缩)

    题意:容易理解,但要注意的地方是:如果魔王回来的时候刚好走到出口或还未到出口都算逃亡失败.因为这里我贡献了一次wa. 分析:仔细阅读题目之后,会发现最多的钥匙数量为10把,所以把这个作为题目的突破口, ...

  4. Yii笔记---redirect重定向

    Yii的redirect方法在CControler与CHttpRequest之中都有被定义,CController中的redirect调用了CHttpRequest中的redirect方法.我们平常调 ...

  5. 关于python中的unicode字符串的使用

    基于python2.7中的字符串: unicode-->编码encode('utf-8')-->写入文件 读出文件-->解码decode('utf-8')-->unicode ...

  6. nagios高可用性设置

    1. 前言 如何来实现nagios监控系统的高可用,监控是很重要的,在关键时刻进行通知报警,通知人员进行相应的处理. 在进行配置的时候,需要配置两台相同服务的nagios服务器,配置相同,同时在运行, ...

  7. Div高度百分比

    有时候设置高度百分比,没有效果. 原因是父元素没有设置高度. 父元素可以设置高度为具体的px.或是100%等百分比. 这样子元素再能根据百分比来设置高度. <style type="t ...

  8. PHPCMS V9实现硬件地址MAC绑定访问技术实现

    目的:会员登录需要 用户名.密码.身份识别码(新增字段) 效果:  解决方法: 目前数据库中macaddress字段已经添加,修改了phpcms\modules\member\index.php 63 ...

  9. linux常用的一些命令(不断增加中)

    linux 下重启 apache: httpd -k restart 下面这些大多命令都可以在<鸟哥私房菜>的服务器中的“常用网络指令”和基础中的“程序与资源管理”中找到ps -aux 这 ...

  10. c++builder Color

    procedure ExtractRGB(const Color: Graphics.TColor; out Red, Green, Blue: Byte); var RGB: Windows.TCo ...