查看: 543|回复: 1

弹出窗体插件 (首先遮住页面，再弹一个Div Form) 可以弹多层 [复制链接]

admin

管理员

Rank: 9 Rank: 9 Rank: 9

TA的每日心情

	无聊 2025-5-27 03:37:20

签到天数: 366 天

[LV.9]以坛为家II

我玩的应用:

电梯直达

楼主

发表于 2011-7-18 10:38:22 |只看该作者 |倒序浏览

此插件可以弹出多层，上一层将下一层遮住。。。。
使用方法：
打开：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[i].contentWindow.document.getElementsByTagName("select");
         DisableDropDownList(frameDrop);
         var childFrames = frames[i].contentWindow.document.getElementsByTagName("iframe");
         for (var j = 0; j < childFrames.length; j++) {
            var childSelect = childFrames[j].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[i].contentWindow.document.getElementsByTagName("select");
         EnableDropDownList(frameDrop);
         var childFrames = frames[i].contentWindow.document.getElementsByTagName("iframe");
         for (var j = 0; j < childFrames.length; j++) {
            var childSelect = childFrames[j].contentWindow.document.getElementsByTagName("select");
            EnableDropDownList(childSelect);
         }
      }
}
}
function DisableDropDownList(dropList) {
for (var i = 0; i < dropList.length; i++) {
      if (dropList[i].style.visibility != "hidden") {
         dropList[i].style.visibility = "hidden";
         dropList[i].change = true;
      }
}
}
function EnableDropDownList(dropList) {
for (var i = 0; i < dropList.length; i++) {
      if (dropList[i].change) {
         dropList[i].style.visibility = "visible";
         dropList[i].change = null;
      }
}
}

分享到: QQ空间 腾讯微博 腾讯朋友

分享0 收藏0 支持0 反对0 分享到人人 转发到微博

[img=http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=fRUcHhYWGAQ9GxIFEBwUEVMeEhA]http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_02.png[/img]