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

相关推荐