用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 ...
随机推荐
- eclipse环境下tomcat远程调试方法
前提:Windows环境tomcat是以catalina.bat方式而非Windows服务形式启动(两者所使用的JAVA配置及JVM参数会有差异). 服务器段设置 方法1:修改CATALINA_OPT ...
- 如何使用java中的对象
使用java中的对象,分2步: 1.创建一个对象: 2.使用对象的属性和方法. 见下面的示例代码: package com.imooc; //1.定义一个类 public class Telphone ...
- datawindow.net数据窗口卡片设置滚动条位置
int pos = Convert.ToInt32(dw1.Describe(colname + ".y")); pos = pos - 40; dw1.Modify(" ...
- canvas小知识
清单 1. 绘制 canvas 矩形 function drawRect(){ var canvas = document.getElementById('canvas'); if (canvas.g ...
- GET与POST在什么情况下使用
GET与POST 你可能想了解GET和POST之间有什么区别,并想知道什么时候使用它们.从理论上讲,如果请求是幂等的就可以使用GET,所谓幂等是指多个请求返回相同的结果.实际上,相应的服务器方法可能会 ...
- 64 位系统遇到未在本地计算机上注册 Microsoft.Jet.OLEDB.4.0
本人写的.net程序部署在windowsserver 2003的操作系统上正常,部署到windows server 2008上时候报错“未在本地计算机上注册 Microsoft.Jet.OLEDB.4 ...
- myeclipse 打开xml jsp页面慢 有时候会自动退出
Myeclipse默认打开文件的方式是 jsp design,每次双击或者使用Ctrl+Shift+R打开 就会用这个打开 ,太慢了而且多次导致Myeclipse挂掉.可以通过以下的方式转化成你想要的 ...
- JAVA CAS原理、unsafe、AQS
concurrent包的实现 由于java的CAS同时具有 volatile 读和volatile写的内存语义,因此Java线程之间的通信现在有了下面四种方式: A线程写volatile变量,随后B线 ...
- Fragment监听返回键
首先创建一个抽象类BackHandledFragment,该类有一个抽象方法onBackPressed(),所有BackHandledFragment的子类在onBackPressed方法中处理各自对 ...
- 12、NFC技术:读写NFC标签中的Uri数据
功能实现,如下代码所示: 读写NFC标签的Uri 主Activity import cn.read.write.uri.library.UriRecord; import android.app.Ac ...