使用div实现的弹出层效果，带遮罩层和透明度效果
代码：
(function(){
if(window.popwindow)return;
var rootEl = null;
var maskel = null;
var winel = null;
window.popwindow = {
_init:function(){
rootEl = document.body;
rootEl.appendChild(div);
maskel = $('fill-mask');
winel = $('fill-window');
maskel.attachEvent("onclick",function(){
setStyle(maskel,{
display:'none'
});
setStyle(winel,{
display:'none'
});
});
},
show:function(cfg){
this._init();
var pos = getPos(cfg.width,cfg.height);
if(cfg.ajax){
toServer({
url:cfg.url,
param:cfg.param
});
}else{
winel.innerHTML = cfg.src;
}
setStyle(winel,{
left:(pos[0])+'px',
top:(pos[1])+'px',
width:cfg.width+'px',
height:cfg.height+'px',
display:''
});
var winSize = getWinSize();
setStyle(maskel,{
width:winSize[0]+'px',
height:winSize[1]+'px',
display:''
});
}
}
var $ = function(id){return document.getElementById(id)};
var div = document.createElement("<div>");
var strHTML = "";
strHTML += "<div id='fill-mask' oncontextmenu='return false;' onselectstart='return false;' style='position:absolute;z-index:10000;top:0;left:0;filter:alpha(opacity=50);background:#000'></div>";
strHTML += "<div id='fill-window' oncontextmenu='return false;' onselectstart='return false;' style='position:absolute;z-index:10001;'></div>";
div.innerHTML = strHTML;
var getPos = function(width,height){
var winSize = getWinSize();
var offWidth = winSize[0];
var offHeight = winSize[1];
var clientX = window.event.clientX+10;
var clientY = window.event.clientY+10;
if(clientX+width > offWidth){
clientX = clientX - width - 20;
}
if(clientY+height > offHeight){
clientY = clientY - height - 20;
}
return [clientX,clientY];
}
var getWinSize = function() {
return [Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth), Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight)]
};
var setStyle = function(el,o){
for (var i in o)el.style[i] = o[i]
}
var toServer = function(obj){
var xhr = false;
if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}
xhr.open("POST",obj.url);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(obj.param);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var rv= xhr.responseText;?
? ?if(rv == "")return false;
? ?winel.innerHTML = rv;
}
}
}
}
})();
?
测试页面：
<html>
<head>
<script type="text/javascript" src="popwindow.js"></script>
<script type="text/javascript">
function showMenu(){
popwindow.show({
width:200,
height:150,
ajax:false,
url:"",//可以ajax获取jsp资源
param:"",
src:"<div style='width:200px;height:100px;background-color:orange;'>哇哈哈</div>"
});
}
</script>
</head>
<body>
? <input type="button" name="test" value="test" onclick="showMenu();">
</body>
</html>