首先用几句话来描述一下实现过程，好有个思路嘛^^：（1）先创建一个div层将整个屏幕罩住（所谓的遮罩层），可设置该层的属性，例如透明度（2）在遮罩层内创建div来展示内容（这里暂时称为内容展示层），在该层就可以灵活的创建个人需要的HTML组件了。例如你在内容展示层中创建了一个iframe，嘿嘿，你就可以请求指定的URL并将其返回的内容呈现在这个iframe之中。
下面就赶紧来看看如何实现吧
1、先上HTML代码
<body>
<div>body content</div>
<a href="javascript:void(‘打开弹出层‘);" onclick="openDialog();">打开弹出层</a>
</body>
呵呵
2、上Javascript部分
看上去有点儿长^^
<script>
window.myLayers = {};
myLayer = function(opts){
//默认参数
var params = {
width: 500,
height: 370,
title: ‘我的窗口‘,
btnWrapH: 37,
titleWrapH: 31,
opacity: 0,
mask: true,
okClick: function(){}
}
//设置参数
opts = opts ? opts : {};
this.mask = (opts.mask == true || opts.mask == false) ? opts.mask : params.mask;
this.okClick = opts.okClick ? opts.okClick : params.okClick;
this.url = opts.url ? opts.url : "";
this.content = opts.content ? opts.content : null;
this.width = opts.width ? opts.width : params.width;
this.height = opts.height ? opts.height : params.height;
this.title = opts.title ? opts.title : params.title;
this.btnWrapH = opts.btnWrapH ? opts.btnWrapH : params.btnWrapH;
this.titleWrapH = opts.titleWrapH ? opts.titleWrapH : params.titleWrapH;
this.opacity = opts.opacity ? opts.opacity : params.opacity;
this.id = opts.id ? opts.id : parseInt(Math.random()*10000); //设置ID
var _top = window;
while(_top && (_top.parent != _top.self) && _top.parent.frames.length == 0){
_top = _top.parent;
}
this.left =_top.document.documentElement.clientWidth && _top.document.body.clientWidth/2 - this.width/2;
this.top = _top.document.documentElement.clientHeight && _top.document.body.clientHeight/2 - this.height/2;
this.left = this.left < 0 ? 0 : this.left;
this.top = this.top < 0 ? 0 : this.top;
//保存，便于在方法之间引用
myLayers[this.id] = this;
};
//核心方法
myLayer.prototype.open = function(){
//定义遮罩层
var _maskDiv = "<div id=‘_maskDiv_"+this.id+"‘ style=‘position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #ccc; margin: 0; opacity: "+this.opacity+"; filter: alpha(opacity="+(this.opacity*100)+");‘></div>"
//按钮
var _wrapBtn = "<div style=‘height: "+this.btnWrapH+"px; width: 100%; background-color: #20B2AA; position: relative;‘><a href=‘javascript:void(0);‘ onclick=‘myLayers[\""+this.id+"\"].cancelBtnClick(\""+this.id+"\");‘ style=‘float: right; display: inline-block; margin-right:10px; color: green;background-color: white; padding: 1px 10px; height: 27px; margin-top: "+((this.btnWrapH - 29)/2)+"px; line-height: 27px; text-decoration: none;‘>关闭</a><a href=‘javascript:void(0);‘ onclick=‘myLayers[\""+this.id+"\"].okBtnClick(\""+this.id+"\");‘ style=‘float: right; display: inline-block; margin-right: 10px; color: green; padding: 1px 10px; margin-top: "+((this.btnWrapH - 29)/2)+"px; height: 27px; line-height: 27px; background-color: white; text-decoration: none;‘>确认</a></div>";
//iframe
var _iframe = "<iframe style=‘width: 100%; height: "+(this.height-(this.titleWrapH+10)-this.btnWrapH)+"px; background-color: white; overflow: auto; ‘ src=‘"+this.url+"‘ frameborder=‘0‘></iframe>";
//content属性优先
var _content = this.content ? this.content : _iframe;
//内容展示层
var _wrapIframe = "<div id=‘_wrapIframe_"+this.id+"‘ style=‘border: 1px solid #E0FFFF; position: absolute; left: "+this.left+"px; top: "+this.top+"px; margin: 0 auto; padding: 0; width: "+this.width+"px; height: "+this.height+"px; background-color: white;‘><h3 style=‘position: relative; margin: 0; padding: 5px 0 5px 10px; height: 31px; line-height: 31px; background-color: #20B2AA; overflow: hidden;‘><a style=‘height: "+this.titleWrapH+"px; line-height: "+this.titleWrapH+"px; float: right; top: 31px; margin-right: 20px; padding: 3px 10px; font-size: 17px;‘ href=‘javascript: void(0);‘ onclick=‘myLayers[\""+this.id+"\"].closeLayer(\""+this.id+"\");‘>关闭</a><span style=‘overflow: hidden;‘>"+this.title+"</span></h3><div style=‘width: 100%; height: "+(this.height-(this.titleWrapH+10)-this.btnWrapH)+"px;‘>"+_content+"</div>"+_wrapBtn+"</div>";
var body = window.document.body;
//是否显示遮罩层
if(this.mask == true){
body.innerHTML = body.innerHTML + _maskDiv;
}
body.innerHTML = body.innerHTML + _wrapIframe;
};
//关闭
myLayer.prototype.closeLayer = function(layerId){
var _w = document.getElementById("_wrapIframe_"+layerId);
_w.parentNode.removeChild(_w);
var _m = document.getElementById("_maskDiv_"+layerId);
_m && _m.parentNode.removeChild(_m);
};
//事件
myLayer.prototype.okBtnClick = function(layerId){
myLayers[layerId].closeLayer(layerId);
myLayers[layerId].okClick();
};
myLayer.prototype.cancelBtnClick = function(layerId){
myLayers[layerId].closeLayer(layerId);
};
//调用打开弹出层
function openDialog(){
var opts = {
opacity: 0.31,
title: ‘我的标题‘,
height: 430,
width: 560,
url: "layer.htm",
mask: true,
okClick: function(){
alert("我被执行了。OK,可以提交表单了。");
},
content: "<p style=‘color: red;‘><a href=‘javascript:void(\"打开弹出层\");‘ onclick=‘openDialog();‘>打开弹出层</a></p>"
}
new myLayer(opts).open();
}
</script>
以上就是全部代码
仅仅是初探。
附上执行档地址：http://www.zhaojz.com.cn/demo/layer.htm
时间： 2024-10-03 13:30:09