弹出层/弹出窗口、提示框、确认框等是做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插件 仔细看吧 好好学学
jquery-plugin-boxycv
《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
layer(全称:jQuery-plugin-layer),一个可以让你想到即可做到的web弹窗(层)解决方案(js组件),作者贤心(菜鸟级前端攻城师)。layer侧重于用户灵活的自定义,为不同人的使用习惯提供动力。其意义在于,可以让您...
jQuery plugin for autocomplete - jQuery自动完成插件
Auto-Save your content when editing in HTML input and textarea DOM element. http://geniuscarrier.com/autosave-a-jquery-plugin/
One click to scroll back to the top of the webpage. http://geniuscarrier.com/scrolltotop-a-jquery-plugin/
jQuery滚动隐藏/显示顶部标题 当你在浏览器中向下滚动鼠标时隐藏头部导航,向上滚动时显示. 演示地址:http://www.jq22.com/plugin/597
表格拖拽排序插件 Table Drag and Drop JQuery plugin v0.7 最新0.7版本
jQuery Media Plugin Demo
Auto-Save your content when editing in HTML input and textarea DOM element. http://geniuscarrier.com/autosave-a-jquery-plugin/
Create an easy-to-config simple tab with smallest code base. http://geniuscarrier.com/simpletab-a-jquery-plugin/
A light-weighted modal box is able to integrate with any web project. http://geniuscarrier.com/justpopup-a-jquery-plugin/
struts2-jquery-plugin-3.1.0.jar
JQuery Cycle Plugin
promptuMenu - jQuery Plugin
JQuery validation plugin学习资料
jQuery Orbit Plugin 1.2.3