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

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

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

commonFn.showPopup(popupHdTit,popupBdShowNode
);

commonFn.closePopup();

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

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

查看实例：模态弹出框