最近比较忙,私事公事都比较多,好久没上来。

网厅改版时,遇到弹出框模块复用的问题,于是在此记录一番。为了良好的用户体验,所以我们经常用好的UI来模拟默认的alert,一般而言,一个网页有一两个弹出框很正常的,但也存在一个网页有多个弹出框的情况。那么问题来了,是用多个不同的弹出框以及多个半透明遮罩层,每一个独立起来呢,还是只用一个透明层,切换多种情况弹出框的隐藏。我们都知道,为了网站弹框的统一,因此很自然的采用同一样式。同一页面里,不同的弹出框的弹出,只是改变了 弹出框的标题 和 弹出框中间的内容,即图中的 弹出框标题(可变) 和 红色框里的三个或以上的黑色框 的显示和隐藏 。

弹框功能图

为了提高代码的利用率,减少页面html结构,统一页面的弹出框,增加弹出框的复用。因此我封装了两个函数,分别为打开弹出框和关闭弹出框:

commonFn.showPopup(popupHdTit,popupBdShowNode
);

commonFn.closePopup();

其中 showPopup 有两个参数,分别为当前显示状态弹出框的标题,以及对应中间部分要显示层。同时,本函数修复了ie6的fixed定位,并使不同状态的弹出框垂直水平居中。

例如,如果要显示文本弹出框,只需要调用函数 commonFn.showPopup(“标题为:文字类型的弹出框”,$(“#popup-text-box”))即可。

查看实例:模态弹出框