`
Kenny.Lee
  • 浏览: 515654 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

jQuery Plugin Boxy/弹出框提示框的一些心得

 
阅读更多

弹出层/弹出窗口、提示框、确认框等是做web项目中必会遇到的一个课题。

 

适当使用弹出层/弹出窗口会给用户带来十分不错的用户体验,因为减少了不必要的页面刷新,特别是如果内容比较少的时候,用弹出层的效果比较好。

 

但是,很多程序员都不是专制前端的高手,css和javascript也许不会十分拿手,往往说起弹出层就比较头痛,只好百度。

 

幸好,jQuery plug中有个Boxy的插件,虽然好久没更新,但不碍事,功能十分强大,提供多种默认提示框样式,更可自定义写弹出窗口。

具体插件官网: http://onehackoranother.com/projects/jquery/boxy/

中文的介绍  http://www.zhangxinxu.com/study/200911/jQuery-plugin-boxy.html

 

也许会用到的2点提示

 

1.获取整个弹出窗口

$(target).parentsUntil('.boxy-wrapper').last().parent()

target为弹出框内的某个元素。每个弹出窗口都会有.boxy-wrapper的样式。

 

2.javascript触发关闭窗口

搜索窗口内的.closs样式的a标签,然后执行标签的click事件如 $('.close').click();

当然你也可以参考第一点的,然后remove()掉。区别在于执行click事件的必须有关闭按钮,执行后有动画效果,支持cache。而自行操作则可根据喜好了。

分享到:
评论

相关推荐

    jQuery_boxy弹出层对话框插件中文演示及讲解

    jQuery_boxy是一款流行的弹出层对话框插件,广泛应用于SNS社区型网站,如开心网、人人网和Facebook。该插件能够创建模态或非模态的弹出对话框,功能包括提示、确认、拖动、改变大小以及Ajax数据加载。由于网上缺乏...

    jquery-plugin-boxy.zip

    "jquery-plugin-boxy.zip"这个压缩包包含了一个jQuery插件,名为Boxy,它是专门用于实现弹框效果的。在网页设计中,弹框是一种常见的交互元素,用来展示警告信息、用户确认对话或提供额外的功能区域。 Boxy插件的...

    jquery-plugin-boxy

    `jQuery-plugin-boxy` 是一款基于 jQuery 的弹出层插件,它为开发者提供了丰富的功能和高度的可定制性,使得在网页中创建弹出层变得简单而高效。 1. **jQuery 基础**: `jQuery` 是一个广泛使用的 JavaScript 库,...

    jQuery 动态弹出框

    9. **插件集成(Plugin Integration)**:虽然可以手动实现上述功能,但已有许多成熟的jQuery插件,如jQuery UI Dialog、Fancybox和当然还有Lightbox本身,可以直接集成到项目中,快速创建功能丰富的弹出框。...

    jQuery全能权威指南:jQuery Core+jQuery Plugin+jQuery UI+jQuery Mobile 源码

    《jQuery全能权威指南:jQuery Core+jQuery Plugin+jQuery UI+jQuery Mobile》的阅读对象是具有一些HTML 、CSS和JavaScript知识的开发者,内容覆盖了jQuery知识体系的全部内容,包括jQuery Core、jQuery Plugin 、...

    jquery 英文教程 jQuery Plugin Development Beginner’s Guide PDF

    jquery 的经典 英文书 jQuery Plugin Development Beginner’s Guide.PDF

    jQuery点击按钮弹出对话框窗口提示插件

    本文将详细讲解如何使用jQuery实现一个点击按钮弹出对话框窗口提示的插件,以便用户在执行关键操作前进行确认或取消。 首先,我们需要引入jQuery库。在`index.html`文件中,添加以下代码片段来引入jQuery: ```...

    autoSave - jQuery Plugin

    Auto-Save your content when editing in HTML input and textarea DOM element. http://geniuscarrier.com/autosave-a-jquery-plugin/

    jQuery plugin for autocomplete - jQuery自动完成插件

    jQuery plugin for autocomplete - jQuery自动完成插件

    jQuery Media Plugin Demo

    jQuery Media Plugin是一款专门为jQuery设计的多媒体插件,用于在网页中轻松集成音频、视频和图像等多媒体元素。这款插件的出现,极大地简化了开发者在HTML5时代处理多媒体内容的复杂性,使得开发者无需深入了解...

    autoSave - a jQuery plugin

    Auto-Save your content when editing in HTML input and textarea DOM element. http://geniuscarrier.com/autosave-a-jquery-plugin/

    scrollToTop - a jQuery plugin

    One click to scroll back to the top of the webpage. http://geniuscarrier.com/scrolltotop-a-jquery-plugin/

    表格拖拽排序插件 Table Drag and Drop JQuery plugin v0.7

    表格拖拽排序插件 Table Drag and Drop JQuery plugin v0.7 最新0.7版本

    simpleTab - jQuery Plugin

    Create an easy-to-config simple tab with smallest code base. http://geniuscarrier.com/simpletab-a-jquery-plugin/

    jQuery zoom图片弹出层插件简单的图片相册弹出层窗口

    jQuery zoom图片弹出层插件简单的图片相册弹出层窗口展示代码 引入相关js和css文件 <link rel="stylesheet" href="css/zoom.css" media="all" /> [removed][removed] [removed][removed] html 格式 ...

    JQuery Cycle Plugin

    2. **兼容性问题**:尽管jQuery Cycle Plugin在大多数现代浏览器中表现良好,但在一些旧版本或非主流浏览器中可能存在兼容性问题,需进行相应的测试和调整。 3. **过渡效果不正常**:检查CSS样式,确保过渡效果相关...

    justPopup - a jQuery plugin

    A light-weighted modal box is able to integrate with any web project. http://geniuscarrier.com/justpopup-a-jquery-plugin/

    jQuery funkyUI plugin 弹出div遮罩层效果插件.rar

    jQuery funkyUI plugin 弹出div遮罩层效果插件,一看这名字您就明白,这是一个jquery插件类,这个实例包中有一个无边框iframe完美遮罩演示。这些网页特效对于平时的前端设计用处非常大,学习之后也能提高你的JS水平...

Global site tag (gtag.js) - Google Analytics