javascript实现弹出层效果(3)

/* * 给DOM元素添加事件 * @param void * @return callback function 回调函数 * */ function addHandler(elem, type, callback, useCapture) { var checkType = checkArgumentType(), _document = document, _callback = checkType.isFunction(callback)? callback:function(){}, _self = this; if (!checkType.isElement(elem) || !checkType.isString(type)) { return; } if (_document.addEventListener) { addHandler = function(elem, type, callback, useCapture) { elem.addEventListener(type, function(e) { _callback.call(_self, e); }, useCapture || false); } } else if (_document.attachEvent) { addHandler = function(elem, type, callback, useCapture) { elem.attachEvent("on" + type, function(e){ _callback.apply(_self, [e]); }); } } else { addHandler = function(elem, type, callback, useCapture) { elem["on" + type] = function(e) { _callback.call(_self, e); }; } } addHandler(elem, type, callback, useCapture); }

首先说一下弹窗的DOM结构：
在外层一般是绝对定位，并使用flex布局使得内容居中；它的直接子元素一般有两个，黑色背景层和内容容器；如图所示：

样式的动画相信前端的同学一般都知道怎么做；但是有一点要注意，不要试图使用display来实现动画；
我使用的解决的办法是首先