<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>漂浮测试页</title>
</head>
<body>
<script type="text/javascript">
var objCommon = function(contentHTML, width, height, z_index) {
//www.rosiness.cn
var o = new Object();
//遮罩层ID
o.ZheZhaoID = "divZheZhaoZheZhaoZheZhao";
//弹窗ID
o.TanChuangID = "divTanChuangTanChuangTanChuang";
//色彩
o.Color = "blue";
//遮罩层方法
o.ZheZhaoF = function() {
var el = document.createElement("div");
el.setAttribute("id", o.ZheZhaoID);
el.setAttribute("style", "background-color:black;z-index:" + z_index + ";position:absolute;left:0px;top:0px;width:100%;height:100%;opacity:0.4;filter:alpha(opacity=40);");
document.body.appendChild(el);
window.onresize = function() {
if (document.getElementById(o.ZheZhaoID)) {
document.getElementById(o.ZheZhaoID).style.width = document.body.scrollWidth;
document.getElementById(o.ZheZhaoID).style.height = document.body.scrollHeight;
}
}
window.onscroll = (function() {
if (document.getElementById(o.ZheZhaoID)) {
document.getElementById(o.ZheZhaoID).style.width = document.body.scrollWidth;
document.getElementById(o.ZheZhaoID).style.height = document.body.scrollHeight;
}
});
}
//关闭弹窗
o.Close = function() {
document.body.removeChild(document.getElementById(o.ZheZhaoID));
document.body.removeChild(document.getElementById(o.TanChuangID));
}
//显示弹窗
o.TanChuangF = function() {
var bodyWidth = document.body.offsetWidth;
var bodyHeight = document.body.offsetHeight;
var left = bodyWidth / 2 - width / 2;
var top = bodyHeight / 2 + height / 2;
var el = document.createElement("div");
el.setAttribute("id", o.TanChuangID);
el.setAttribute("style", "width:" + width + "px;height:" + height + "px;background-color:white;position:absolute;z-index:" + z_index + 1 + ";left:" + left + "px;top:" + top + "px;border:solid 1px " + o.Color + ";");
var closeBtn = document.createElement("span");
closeBtn.innerHTML = "关闭";
closeBtn.setAttribute("style", "cursor:pointer;padding-right:5px;");
closeBtn.onclick = function() { o.Close() };
var title = document.createElement("div");
title.setAttribute("style", "text-align:right;height:20px;line-height:20px;font-size:12px;background-color:" + o.Color + ";color:white;");
var content = document.createElement("div");
content.innerHTML = contentHTML;
title.appendChild(closeBtn);
el.appendChild(title);
el.appendChild(content);
document.body.appendChild(el);
}
o.Show = function() {
o.ZheZhaoF();
o.TanChuangF();
}
return o;
}
//调用弹出方法设置内容
function Tanchu() {
var content = "<div style='padding:5px;'>这是内容</div>";
var width = 200;
var height = 200;
var z_index = 2;
var ss = new objCommon(content, width, height, z_index);
ss.Show();
}
</script>
<input type="button" value="弹出漂浮" onclick="Tanchu();" />
</body>
</html>