不明白为什么同时打开两个弹出框时只有最上层的关闭按钮有效果

这是<head>里面引用的代码<script >
Object.extend = function( destination, source ) {
    if ( arguments.length == 0 ) return window;
if ( arguments.length == 1 ) {
source = destination;
destination = window;
} for ( var property in source ) {
        destination[ property ] = source[ property ];
}    return destination;
};;(function( window, undefined ) { var Class = {
emptyFn: function(){},
keys: function( object ) {
var keys = [];
for ( var property in object ) {
keys.push( property );
}
return keys;
},
isFunction: function( object ) {
return typeof( object ) === "function";
},
isUndefined: function( object ) {
return typeof( object ) === "undefined";
},
argumentNames: function( fn ) {
var names = fn.toString().match(/^[\s$]*function[^(]*\(([^$]*)\)/)[1].replace(/\s+/g, '').split(',');
return names.length == 1 && !names[0] ? [] : names;
},
bind: function() {
if (arguments.length < 2) return Class.emptyFn;
var args = Class.makeArray(arguments), object = args.shift(), func = args.shift();
return function() {
return func.apply(object, args.concat(Class.makeArray(arguments)));
};
},
wrap: function( wrapper, fn ) {
var __method = fn;
return function() {
return wrapper.apply(this, [__method.bind(this)].concat(Class.makeArray(arguments)));
};
}
}; Object.extend(Class, {
makeArray: function( iterable ) {
if ( !iterable ) return [];
if ( iterable.toArray ) return iterable.toArray();

var length = iterable.length || 0,
results = new Array( length ); while( length-- ) {
results[ length ] = iterable[ length ];
} return results;
},
addMethod: function( source ) {
var ancestor = this.superclass && this.superclass.prototype,
properties = Class.keys(source);

if ( !Class.keys({ toString: true }).length ) {
properties.push("toString", "valueOf");
} for ( var i = 0, length = properties.length; i < length; i++ ) {
var property = properties[ i ],
value = source[ property ]; if ( ancestor && Class.isFunction( value ) && (Class.argumentNames( value ))[0] == "$super" ) {
var method = value;
value = (function( m ) {
return function() { return ancestor[ m ].apply(this, arguments) };
})( property );
value = Class.wrap( method, value );
value.valueOf = Class.bind( method, method.valueOf );
value.toString = Class.bind( method, method.toString );
} this.prototype[ property ] = value;
} return this;
},
create: function() {
var parent = null,
properties = this.makeArray( arguments ); if ( Class.isFunction( properties[0] ) ) {
parent = properties.shift();
}
function klass() {
this.initialize.apply(this, arguments);
}
Object.extend( klass, { addMethod: this.addMethod } );
klass.superclass = parent;
klass.subclasses = [];
if ( parent ) {
var subclass = function(){ };
subclass.prototype = parent.prototype;
klass.prototype = new subclass;
parent.subclasses.push( klass );
}
for ( var i = 0; i < properties.length; i++ ) {
this.addMethod.call( klass, properties[ i ] );
}
if ( !klass.prototype.initialize ) {
klass.prototype.initialize = this.emptyFn;
}
klass.prototype.constructor = klass; return klass;
}
}); window.Class = Class;
})( window );
</script>
<script>
var Root = Class.create({
initialize: function() {},
addEvent: function( el, evt, fn ) {
console.log("addEvent");
if ( el.addEventListener ) {
el.addEventListener(evt, fn, false);
} else if ( el.attachEvent ) {
el.attachEvent("on" + evt, fn);
} else {
el["on" + evt] = fn;
} return this;
},
inArray: function( elem, arr ) {
for ( var i = 0, len = arr.length; i < len; i++ ) {
if ( elem == arr[i] ) return i;
}
return -1;
},
removeEvent: function( el, evt, fn ) {
if ( el.removeEventListener ) {
el.removeEventListener(evt, fn, false);
} else if ( el.detachEvent ) {
el.detachEvent("on" + evt, fn);
} else {
el["on" + evt] = null;
}

return this;
},
stopPropagation: function( e ) {
if ( window.event ) {
e.cancelBubble = true;
} else {
e.stopPropagation();
}
},
stopDefault: function( e ) {
if ( e.preventDefault ) {
e.preventDefault();
} else {
window.event.returnValue = false;
} return false;
},
getScrollTop: function() {
return document.documentElement.scrollTop || document.body.scrollTop;
},
getScrollHeight: function() {
return document.documentElement.scrollHeight || document.body.scrollHeight;
},
getClientHeight: function() {
return document.documentElement.clientHeight || document.body.clientHeight;
},
getClientWidth: function() {
return document.documentElement.clientWidth || document.body.clientWidth;
},
setScrollTop: function (value) {
if ( document.documentElement.scrollTop ) {
document.documentElement.scrollTop = value;
} else {
document.body.scrollTop = value;
}
},
scrollTo: function( x, y ) {
window.scrollTo(x, y);
},
isObject: function( obj ) {
return Object.prototype.toString.call( obj ) === "[object Object]";
}
});
var JPopup = Class.create(Root, {
renderTo: document.body,
id: 'popup',
html: '<div class="popup_hd"><h2>弹出框</h2><a href="javascript:void(0);" id="J_Pop_Close">X</a></div><div class="popup_bd"><p class="popup_content">您确定要关闭这个弹出窗吗？</p><div class="popup_button"><span class="left"><a href="javascript:void(0);" id="J_Btn_Submit">确定</a></span><span class="right"><a href="javascript:void(0);" id="J_Btn_Cancel">取消</a></span></div></div><div class="popup_ft"></div>',
element: null,
hasMask: false,
maskId: null,
initialize: function( options, overwrite ) {
this.params = options;
this.overwrite = overwrite; for ( var i in options ) {
if ( overwrite ) {
this[i] = options[i];
} else {
if ( typeof(this[i]) === "undefined" ) {
this[i] = options[i];
} else {
continue;
}
}
} this.append();
this.addEvents();
this.show();
this.callback && this.callback();
},
append: function() {
this.renderTo.innerHTML += '<div class="popup" id="' + this.id + '">' + this.html + '</div>';
this.element = document.getElementById(this.id);
JPopup.instanceId.push(this.id);
},
addEvents: function() {
var events = this.events; for ( var i = 0, len = events.length; i < len; i++ ) {
(function( that, i ) {
console.log("abababab: ", events[i].id);
var elem = document.getElementById(events[i].id);
elem && (elem["on" + events[i].ev] = function( e ) {
console.log("click");
events[i].fn.call( that );
});
})( this, i );
}
},
render: function() {
this.initialize(this.params, this.overwrite);
},
show: function() {
var element = this.element,
cWidth = this.getClientHeight(),
sHeight = this.getScrollHeight(),
maskElem, maskStyle;

if ( element == null ) {
this.render();
} else {
element = document.getElementById(this.id);
if ( element && (element.style.display != "block") ) {
element.style.display = "block";
JPopup.showLength++;
}
} if ( this.hasMask && this.maskId ) {
maskElem = document.getElementById(this.maskId);
if ( maskElem ) {
maskElem.style.display = "block";
} else {
maskElem = document.createElement("div");
maskElem.id = this.maskId;

document.body.appendChild( maskElem );
}

maskStyle = {
"width": cWidth + "px",
"height": sHeight + "px",
"backgroundColor": "#000000",
"opacity": "0.35",
"filter": "alpha(opacity=35)",
"position": "absolute",
"left": "0px",
"top": "0px",
"zIndex": 99999
};

if ( this.maskStyle && this.isObject( this.maskStyle ) ) {
maskStyle.extend(maskStyle, this.maskStyle);
} for ( var i in maskStyle ) {
maskElem.style[i] = maskStyle[i];
}
} this.fixPosition();
},
hide: function( ibool, fn ) {
var element = document.getElementById(this.id),
maskElem, index;

if ( element ) {
if ( ibool ) {
if ( (index = this.inArray( this.id, JPopup.instanceId )) != -1 ) {
JPopup.instanceId.splice(index, 1);
} element.parentNode && element.parentNode.removeChild( element );
this.element = null;
} else {
element.style.display = "none";
}

if ( JPopup.showLength > 0 ) {
JPopup.showLength--;
}

fn && fn();
} if ( this.hasMask && this.maskId ) {
maskElem = document.getElementById(this.maskId);
maskElem && (maskElem.style.display = "none");
}
},
fixPosition: function() {
var _this = this,
popElem = this.element,
st = this.getScrollTop(),
sh = this.getScrollHeight(),
cw = this.getClientWidth(),
ch = this.getClientHeight(),
maskElem, oh;

if ( popElem ) {
oh = popElem.offsetHeight;
if (ch > oh) {
popElem.style.top = (st + (ch - oh)/2) + "px";
} else {
popElem.style.top = st + "px";
}
}

if ( this.hasMask && this.maskId ) {
maskElem = document.getElementById(this.maskId);
if ( maskElem ) {
maskElem.style.width = cw + "px";
maskElem.style.height = sh + "px";
}
} if ( JPopup.showLength == 1 ) {
window.onscroll = function() {
_this.fixPosition();
};
window.onresize = function() {
_this.fixPosition();
};
}
}
});
JPopup.showLength = 0;
JPopup.instanceId = [];
</script>
append: function() {
//this.renderTo.innerHTML += '<div class="popup" id="' + this.id + '">' + this.html + '</div>';
        this.dom = document.createElement('div');
        this.dom.setAttribute('id',this.id);
        this.dom.className = 'popup';
        this.dom.innerHTML = this.html;
        this.renderTo.appendChild(this.dom);
this.element = document.getElementById(this.id);
JPopup.instanceId.push(this.id);
},断点调试  当运行到我注释的那行  前面绑定的事件就失效了
我成dom操作就ok
要习惯调试
document.getElementById('J_Pop_Close1').onclick我在控制台里输入这个

调试易

不明白为什么同时打开两个弹出框时只有最上层的关闭按钮有效果

解决方案 »