js弹出div并显示遮罩层

时间:2024-02-26 22:00:00 


//--------------------弹出层-------------------
//popDivId:弹出层div的ID
//dragDivId:用于拖动div的ID
//isShowMask:是否显示遮罩层
function popDivShow(popDivId, dragDivId, isShowMask) {
if (isShowMask) {
creatMask(popDivId);
}
var oWins = document.getElementById(popDivId);
var oWins_title = document.getElementById(dragDivId);
var bDrag = false;
var disX = disY = 0;
oWins.style.display = "block";
oWins_title.onmousedown = function(event) {
var event = event || window.event;
bDrag = true;
disX = event.clientX - oWins.offsetLeft;
disY = event.clientY - oWins.offsetTop;
this.setCapture && this.setCapture();
return false;
};
document.onmousemove = function(event) {
if (!bDrag)
return;
var event = event || window.event;
var iL = event.clientX - disX;
var iT = event.clientY - disY;
var maxL = document.documentElement.clientWidth - oWins.offsetWidth;
var maxT = document.documentElement.clientHeight - oWins.offsetHeight;
iL = iL < 0 ? 0 : iL;
iL = iL > maxL ? maxL : iL;
iT = iT < 0 ? 0 : iT;
iT = iT > maxT ? maxT : iT;
oWins.style.marginTop = oWins.style.marginLeft = 0;
oWins.style.left = iL + "px";
oWins.style.top = iT + "px";
return false;
};
document.onmouseup = window.onblur = oWins_title.onlosecapture = function() {
bDrag = false;
oWins_title.releaseCapture && oWins_title.releaseCapture();
};
}
// 隐藏弹出层
function popDivHidden(popDivId) {
var oWins = document.getElementById(popDivId);
oWins.style.display = "none";
window.parent.document.body.removeChild(window.parent.document.getElementById("maskDiv"));
}
// 获取弹出层的zIndex
function getZindex(popDivId) {
var popDiv = document.getElementById(popDivId);
var popDivZindex = popDiv.style.zIndex;
return popDivZindex;

}
// 创建遮罩层
function creatMask(popDivId) {
// 参数w为弹出页面的宽度,参数h为弹出页面的高度,参数s为弹出页面的路径
var maskDiv = window.parent.document.createElement("div");
maskDiv.id = "maskDiv";
maskDiv.style.position = "fixed";
maskDiv.style.top = "0";
maskDiv.style.left = "0";
maskDiv.style.zIndex = getZindex(popDivId) - 1;
maskDiv.style.backgroundColor = "#333";
maskDiv.style.filter = "alpha(opacity=70)";
maskDiv.style.opacity = "0.7";
maskDiv.style.width = "100%";
maskDiv.style.height = (window.parent.document.body.scrollHeight + 50) + "px";
window.parent.document.body.appendChild(maskDiv);
maskDiv.onmousedown = function() {
window.parent.document.body.removeChild(window.parent.document.getElementById("maskDiv"));
};
}
标签:弹出div
0
投稿

猜你喜欢

  • phar绕过phar与HALT实现文件上传功能

    2023-05-25 06:47:36
  • python3.5 email实现发送邮件功能

    2023-06-14 15:58:59
  • JS的IE和FF兼容性问题汇总

    2008-03-08 13:01:00
  • 在Python中使用异步Socket编程性能测试

    2023-04-20 23:19:56
  • 关于Python与Golang语言的对比分析

    2023-03-10 18:54:06
  • Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器

    2023-05-21 10:05:28
  • 浅谈Selenium+Webdriver 常用的元素定位方式

    2022-04-17 23:14:43
  • 使用Python中Tkinter模块的Treeview 组件显示ini文件操作

    2022-05-23 03:45:38
  • Anaconda的安装与虚拟环境建立

    2022-05-26 01:06:22
  • ie和firefox中css自动换行实现方法

    2008-04-08 12:49:00
  • 支付宝lab logo设计创意发想

    2009-11-12 12:44:00
  • IDEA 2020 设置项目集成git 及svn和git之间的切换问题

    2022-11-23 20:02:14
  • Python词云的正确实现方法实例

    2021-08-05 10:53:41
  • SQL Server 数据库基础编程详解

    2024-01-17 03:29:37
  • 拖拽翻页(ThrowPage)详解 cool

    2009-12-02 09:54:00
  • Python爬虫简单运用爬取代理IP的实现

    2021-08-25 23:26:42
  • python如何使用replace做多字符替换

    2022-10-23 01:26:59
  • python中数组和矩阵乘法及使用总结(推荐)

    2021-11-30 04:29:31
  • PyTorch 使用torchvision进行图片数据增广

    2023-06-19 23:09:10
  • Python第三方库的安装方法总结

    2022-09-23 12:14:46
  • asp之家 网络编程 m.aspxhome.com