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。而自行操作则可根据喜好了。