`
caiceclb
  • 浏览: 242437 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

弹出层区域外点击退出的实现

阅读更多

经常用到jQuery一个弹出层组件,thickbox。用它之前也自己写过一个插件,但是遮罩层效果有bug,兼容性不是很好,对于弹出层区域外点击也能关闭层的实现,起初想法也是捕获弹出层外区域的单击事件来启动层的关闭动作。

 

实际中,一般弹出层会有个遮罩层,那么其实对遮罩层绑定单击事件就行了,看thickbox也是如此实现的。那么如果没有遮罩层呢?难道绑定N个其他div亦或是body?

 

今天冒出一个想法,并试验了下,应该是可行的。

 

当弹出一个层时,同时触发层的focus事件,使其获得一个焦点,那么用户在层外点击,则可以触发一个blur事件,在blur事件的回调函数中写层退出动作就可以了。这样的话,可以在没有遮罩层的情况下更方便一些。

1
0
分享到:
评论
1 楼 caiceclb 2010-04-27  
现在使用jQuery1.3.2, 焦点事件除了一些表单元素,链接,其他比如body,div,p等,在FF下对focus/blur无动于衷

相关推荐

    css3 jquery 弹出层实现漂亮的弹出层

    在网页设计中,弹出层(也称为模态窗口或对话框)是一种常见的交互元素,用于展示重要信息、用户确认操作或提供额外的功能区域。在本教程中,我们将深入探讨如何利用CSS3和jQuery来创建一个既美观又功能丰富的弹出层...

    jquery弹出层带关闭按钮

    弹出层通常是指在用户进行特定操作后,如点击按钮或链接,会在页面上弹出一个独立的显示区域,用于显示额外信息或进行交互操作。这种效果可以是模态对话框(Modal Dialog),即阻塞用户与页面其他部分的交互,也可以...

    基于jQuery的弹出层放大插件

    6. **关闭按钮**:为了方便用户随时退出弹出层,插件提供了一个明显的关闭按钮,点击后可以快速返回原来的页面。 7. **自适应布局**:此插件具备自适应布局功能,可以根据浏览器窗口大小或设备屏幕尺寸自动调整图片...

    浮层(AJAX)(弹出层,并半透明)

    9. **关闭机制**:提供清晰的关闭按钮或点击非浮层区域自动关闭浮层,以保证用户能轻松退出弹出层。 通过以上步骤,开发者可以构建一个功能完整、用户体验良好的浮层(AJAX)弹出层。这种技术广泛应用于数据表单的...

    使用Popwindow实现左侧弹出菜单层

    PopupWindow可以实现浮层效果,主要方法有:可以... 为了将PopupWindow的多个功能展现并力求用简单的代码实现,编写了一个点击按钮左侧弹出菜单的功能,实现出现和退出时显示动画效果并点击其他区域时弹出层自动消失

    android popwindow实现左侧弹出菜单层

    PopupWindow可以实现浮层效果,主要方法有:可以...为了将PopupWindow的多个功能展现并力求用简单的代码实现,编写了一个点击按钮左侧弹出菜单的功能,实现出现和退出时显示动画效果并点击其他区域时弹出层自动消失。

    ios-自定义弹出视图,添加好友.zip

    在这个项目中,"TCAlertView"可能是一个继承自UIView的类,它实现了弹出视图的基本结构,包括背景遮罩层、主要内容区域以及可能的按钮布局。开发者可能会通过设置frame、动画效果、颜色、字体等属性来自定义其外观。...

    仿微博点击缩略图预览大图效果支持图片旋转

    2. 创建或调整一个预览区域(通常是弹出层或覆盖层)以显示大图。 3. 将大图加载到预览区域,并根据需要进行尺寸适应和居中处理。 4. 添加关闭或返回小图的按钮,以便用户可以随时退出大图预览模式。 接下来,我们...

    PopupWindowDemo

    PopupWindow可以实现浮层效果,主要方法有:可以...为了将PopupWindow的多个功能展现并力求用简单的代码实现,编写了一个点击按钮顶部弹出菜单的功能,实现出现和退出时显示动画效果并点击其他区域时弹出层自动消失

    Android仿QQ消息提示实现弹出式对话框

    总的来说,实现Android仿QQ消息提示的弹出式对话框需要对Android的基础组件有深入理解,掌握Dialog、PopupWindow等多种实现方式,并能够灵活运用布局设计和事件处理。通过自定义,我们可以打造出与系统风格一致、...

    javascript 通过封装div方式弹出div窗体

    通过封装div实现的弹窗功能,使得开发者可以在网页中动态创建弹出层,实现页面的交互效果。下面将详细解读所提及的技术知识点。 首先,通过构造函数创建了名为DivWindow的JavaScript对象,这是整个弹出div窗体功能...

    Jquery ThickBox插件使用心得(不建议使用)

    点击弹出层外部区域同样可以关闭弹出层,但是这不适用于需要确认的弹出层。 虽然ThickBox在使用上可以很方便地实现功能,但是不被推荐使用的理由还包括可能存在的安全漏洞,以及在现代前端开发中,可能无法很好地与...

    FORM最小化到托盘和关闭需密码确认

    同时,当用户试图关闭窗口时,系统会弹出一个对话框要求输入密码进行确认,确保用户是安全地关闭应用程序,防止误操作。 描述中的"象QQ那样可以最小话到右下脚"进一步解释了这个功能的具体表现,即模仿QQ等常见软件...

    Android 仿苹果底部弹出Dialog

    在Android开发中,为了提供与iOS类似的用户体验,开发者有时会想要实现类似苹果设备底部弹出的对话框(Dialog)。这个功能通常用于展示一系列选项或操作,用户可以通过点击这些选项进行交互。本文将详细介绍如何在...

    PS 抠图插件KnockOut2_onegreen

    点击Detai上面的那个小图框会弹出一个菜单,然后根据路径进行选择。   9.退出。点击File菜单中的Apply,就可返回PhotoShop界面了。你还想加上什么炫目的效果,就在PhotoShop里继续进行吧。 补充:在方框打上钩,就...

    java绘图软件.docx

    - **颜色选择器**: `JButton`按钮,点击后弹出色彩选择对话框,支持自定义线条颜色。 - **橡皮擦**: `JButton`按钮,用于擦除画布上的图形。 #### 二、关键技术与实现细节 1. **界面布局管理**: - 使用了`...

    Excel 使用技巧

    - 在Excel中快速选中所有工作表可以通过以下步骤实现:点击工作簿下方的工作表标签区域中的任意位置,然后按下`Ctrl + A`键。这样可以一次性选中所有的工作表,方便进行批量操作。 **2. 必备技能:快速启动Excel**...

    简约扁平风格jQuery确认对话框插件

    1. **HTML结构**:对话框通常由一个包含标题、内容区域和操作按钮的弹出层组成。在HTML中,可以通过`<div>`元素创建这些部分,并使用CSS控制它们的样式。 2. **CSS样式**:为了实现扁平化和简约的设计,需要编写CSS...

Global site tag (gtag.js) - Google Analytics