弹出窗体插件 (首先遮住页面，再弹一个Div Form) 可以弹多层
此插件可以弹出多层，上一层将下一层遮住。。。。使用方法：
打开：FormManage.PopUp(550, 250, "选择网点", url);
关闭：FormManage.TopClose(); 直接关闭最上层
//这是用来设置关闭图片的样式
<style type="text/css">
.PopCloseImage
{
background: url(../images/icon_close.gif) 0 0 no-repeat;
cursor: pointer;
}
</style>
//下面代码放在js文件里
var CoverDiv = function(){}
CoverDiv.prototype = {
Index : 100,
DIV : null,
Show : function(index)
{
this.Index = index;
this.DIV = document.getElementById("CoverDiv" + index);
if (!this.DIV) {
this.DIV = document.createElement("DIV");
this.DIV.id = "CoverDiv" + index;
}
this.DIV.style.width = "100%";
if (document.body.scrollHeight < screen.height) {
this.DIV.style.height = screen.height;
}
else {
this.DIV.style.height = document.body.scrollHeight + 50;
}
this.DIV.style.background = "#444444";
this.DIV.style.filter = "alpha(opacity=60)";
if (parseInt(index, 10) > 0) {
this.DIV.style.zIndex = 101 + parseInt(index);
}
else {
this.DIV.style.zIndex = 100;
}
this.DIV.style.position = "absolute";
this.DIV.style.left = 0;
this.DIV.style.top = 0;
this.DIV.style.margin = "0px";
this.DIV.setCapture();
//必需设置外边距，不然全部遮住
document.body.style.margin = "0px";
document.body.appendChild(this.DIV);
},
Close : function()
{
document.body.removeChild(this.DIV);
delete this.DIV;
}
};
var PopForm = function (index) {
this.Index = index;
//生成窗口DIV
this.dialog = document.getElementById("DIVBody" + index);
if (!this.dialog) {
this.dialog = document.createElement("DIV");
this.dialog.id = "DIVBody" + index;
}
var divHTML = "<div id=\"DIVHead" + index + "\" style=\"width:100%;height:20px;padding-top:1px;cursor:move;font-weight: bold;font-size: 11px;\" >";
divHTML += "<div style=\"float:left;margin:1px;font-weight: bold;font-size: 11px;\" id=\"spanTitle" + index + "\"> </div>";
divHTML += "<div class=\"PopCloseImage\" style=\"width:16px;float:right;margin:1px;\" id=\"imgClose" + index + "\"/>";
divHTML += "</div><div id=\"DIVContent" + index + "\" style=\"width:100%;overflow-x:hidden;text-align:center;background:#ffffff;\">";
divHTML += "<iframe id=\"frmContent" + index + "\" width=\"100%\" height=\"100%\" frameborder=\"0\" scroll=\"no\"></iframe></div>";
this.dialog.innerHTML = divHTML;
this.dialog.style.position = "absolute";
if (index != "") {
this.dialog.style.zIndex = 102 + parseInt(index);
}
else {
this.dialog.style.zIndex = 101;
}
this.dialog.style.width = "300px";
this.dialog.style.height = "100px";
this.dialog.style.display = "none";
this.dialog.style.overFlow = "hidden";
this.dialog.style.position = "absolute";
this.dialog.style.float = "left";
this.dialog.style.background = "#C6D2EB";
document.body.appendChild(this.dialog);
//控件
this.divHead = document.getElementById("DIVHead" + index);
this.spanTitle = document.getElementById("spanTitle" + index);
this.btnClose = document.getElementById("imgClose" + index);
this.divContent = document.getElementById("DIVContent" + index);
this.frmContent = document.getElementById("frmContent" + index);
//关联事件
if (document.addEventListener) {
this.divHead.addEventListener("onmousedown", PopForm.Head_OnMousedown, false);
this.spanTitle.addEventListener("onmousedown", PopForm.Head_OnMousedown, false);
this.btnClose.addEventListener("click", FormManage.TopClose, false);
document.addEventListener("onmouseup", PopForm.Document_OnMouseup, false);
document.addEventListener("onmousemove", PopForm.Document_OnMousemove, false);
}
else if (document.attachEvent) {
this.divHead.attachEvent("onmousedown", PopForm.Head_OnMousedown);
this.spanTitle.attachEvent("onmousedown", PopForm.Head_OnMousedown);
this.btnClose.attachEvent("onclick", FormManage.TopClose);
document.attachEvent("onmouseup", PopForm.Document_OnMouseup);
document.attachEvent("onmousemove", PopForm.Document_OnMousemove);
}
}
PopForm.prototype = {
Index : 101,
//定义窗口大小
SetSize : function (width, height)
{
this.dialog.style.width = width;
this.dialog.style.height = height;
this.divContent.style.height = height - 20;
},
SetTitle : function (title) {
this.spanTitle.innerText = " " + title;
},
Show : function (url)
{
//禁用页面的所有DropDownList，包含Iframe里的
DisableDrop();
var scrollPos;
if (typeof window.pageYOffset != 'undefined') {
scrollPos = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined' &&
document.compatMode != 'BackCompat') {
scrollPos = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
scrollPos = document.body.scrollTop;
}
if (this.frmContent) {
this.frmContent.src = url;
}
var centerX = document.body.clientWidth / 2;
var centerY = scrollPos + screen.height / 2 - 100;
var startX = centerX - parseInt(this.dialog.style.width, 10) / 2; //屏幕中心点Left
var startY = centerY - parseInt(this.dialog.style.height, 10) / 2; //屏幕中心点Top
if (startX < 0) startX = 0;
if (startY < 0) startY = 0;
this.dialog.style.left = startX;
this.dialog.style.top = startY;
this.dialog.style.display = ""; //显示
},
Close : function () {
EnableDrop();
document.body.removeChild(this.dialog);
}
}
PopForm.downX = 0;
PopForm.downY = 0;
PopForm.downLeft = 0;
PopForm.downTop = 0;
PopForm.moveDialog = null;
//当按下窗口标题栏时,记录下窗口当前的位置,用于拉动
PopForm.Head_OnMousedown = function () {
var event = event ? event : (window.event ? window.event : null);
PopForm.moveDialog = event.srcElement.parentNode;
if (event != undefined && event != null) {
PopForm.downX = event.clientX;
PopForm.downY = event.clientY;
}
PopForm.downLeft = PopForm.moveDialog.offsetLeft;
PopForm.downTop = PopForm.moveDialog.offsetTop;
PopForm.moveDialog.setCapture();
}
//移动窗口
PopForm.Document_OnMousemove = function () {
if (PopForm.moveDialog) {
var event = event ? event : (window.event ? window.event : null);
var x = PopForm.downLeft + event.clientX - PopForm.downX;
var y = PopForm.downTop + event.clientY - PopForm.downY;
PopForm.moveDialog.style.left = x;
PopForm.moveDialog.style.top = y;
}
}
//停止移动
PopForm.Document_OnMouseup = function () {
if (PopForm.moveDialog) {
PopForm.downX = null;
PopForm.downY = null;
PopForm.downLeft = null;
PopForm.downTop = null;
PopForm.moveDialog.releaseCapture();
PopForm.moveDialog = null;
}
}
var FormManage = {
ArrPopForm : new Array(),
ArrCoverDiv : new Array(),
PopUp : function (width, height, title, url) {
var index = FormManage.ArrPopForm.length + 1;
var cDiv = new CoverDiv();
cDiv.Show(index);
var popForm = new PopForm(index);
popForm.SetSize(width, height);
popForm.SetTitle(title);
popForm.Show(url);
FormManage.ArrPopForm.push(popForm);
FormManage.ArrCoverDiv.push(cDiv);
},
TopClose : function () {
var popForm = FormManage.ArrPopForm.pop();
var cDiv = FormManage.ArrCoverDiv.pop();
popForm.Close();
cDiv.Close();
}
};
/*********************辅助方法 禁用启用下拉列表(仅针对IE6)****************************/
function DisableDrop() {
var ua, s, i;
var browserName = navigator.appName;
ua = navigator.userAgent;
s = "MSIE";
i = ua.indexOf(s);
var browserVer = parseFloat(ua.substr(i + s.length));
if (browserName == "Microsoft Internet Explorer" && browserVer < 7) {
var dropList = document.getElementsByTagName("select");
DisableDropDownList(dropList);
var frames = document.getElementsByTagName("iframe");
for (var i = 0; i < frames.length; i++) {
var frameDrop = frames.contentWindow.document.getElementsByTagName("select");
DisableDropDownList(frameDrop);
var childFrames = frames.contentWindow.document.getElementsByTagName("iframe");
for (var j = 0; j < childFrames.length; j++) {
var childSelect = childFrames.contentWindow.document.getElementsByTagName("select");
DisableDropDownList(childSelect);
}
}
}
}
function EnableDrop() {
var ua, s, i;
var browserName = navigator.appName;
ua = navigator.userAgent;
s = "MSIE";
i = ua.indexOf(s);
var browserVer = parseFloat(ua.substr(i + s.length));
if (browserName == "Microsoft Internet Explorer" && browserVer < 7) {
var dropList = document.getElementsByTagName("select");
EnableDropDownList(dropList);
var frames = document.getElementsByTagName("iframe");
for (var i = 0; i < frames.length; i++) {
var frameDrop = frames.contentWindow.document.getElementsByTagName("select");
EnableDropDownList(frameDrop);
var childFrames = frames.contentWindow.document.getElementsByTagName("iframe");
for (var j = 0; j < childFrames.length; j++) {
var childSelect = childFrames.contentWindow.document.getElementsByTagName("select");
EnableDropDownList(childSelect);
}
}
}
}
function DisableDropDownList(dropList) {
for (var i = 0; i < dropList.length; i++) {
if (dropList.style.visibility != "hidden") {
dropList.style.visibility = "hidden";
dropList.change = true;
}
}
}
function EnableDropDownList(dropList) {
for (var i = 0; i < dropList.length; i++) {
if (dropList.change) {
dropList.style.visibility = "visible";
dropList.change = null;
}
}
}
此帖必火！
static/image/common/sigline.gif
1.di-guo.info 2.di-guo.info
3.di-guo.info 4.di-guo.info
5.di-guo.info 6.di-guo.info 7.di-guo.info 8.di-guo.info
9.di-guo.info
页:
[1]