网络编程
位置:首页>> 网络编程>> JavaScript>> js弹出div并显示遮罩层

js弹出div并显示遮罩层

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

标签:弹出div

//--------------------弹出层-------------------
//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"));
};
}
0
投稿

猜你喜欢

  • 本文介绍基于Python语言,针对一个文件夹下大量的Excel表格文件,基于其中每一个文件,随机从其中选取一部分数据,并将全部文件中随机获取
  • 前言今天教大家用wrodcloud模块来生成词云,我读取了一篇小说并生成了词云,先看一下效果图:效果图一:效果图二:根据效果图分析的还是比较
  • 最近闲来无事, 于是就简单学习了下Go语言的基本的用法。由于实践才是最快的学习方法,所以这里就以下载网络图片或文件入手来学习Go语言文件下载
  • 在ASP中,除了ADODB、Scripting 等一些常用组件外,我们还可以用微软的ActiveX方法来轻松捕获哟: <%u
  • 标准库Python拥有一个强大的标准库。Python语言的核心只包含数字、字符串、列表、字典、文件等常见类型和函数,而由Python标准库提
  • 《色彩解答》系列之一 色彩层次这次我们将深入进去了解一下众多色彩在一起之后所存在的“比例”关系。我们在使用色彩的时候不可能把所有的色彩都做得
  • 序言小学妹说要毕业了,学了一学期Python等于没学,现在要做毕设做不出来,让我帮帮她,晚上去她家吃夜宵。当时我心想,这不是分分钟的事情,还
  • python中自带了处理python的模块,使用时候直接import json即可。 使用loads方法即可将json字符串转换成pytho
  • 在学习pygame模块过程中,我们可以通过使用 pygame模块实现很多功能性的东西,但是很多人应该没有利用pygame实现过雪花飘落的效果
  • 先学会文件的读写!比如像以前在学校读书的时候,第一门编程课设计要求是制作学生管理系统。这就需要使用文件来处理(也可以用数据库,但是一般C语言
  • 配置Laravel 的邮件服务可以通过 config/mail.php 配置文件进行配置。邮件中的每一项都在配置文件中有单独的配置项,甚至是
  • SQLAlchemy的理念是,SQL数据库的量级和性能重要于对象集合;而对象集合的抽象又重要于表和行。一 安装 SQLAlchemypip
  • 本文实例讲述了Oracle例外用法。分享给大家供大家参考,具体如下:一、例外分类oracle将例外分为预定义例外、非预定义例外和自定义例外三
  • 在crnn训练的时候需要用到lmdb格式的数据集,下面是python生成lmdb个是数据集的代码,注意一定要在linux系统下,否则会读入图
  • 字典数据结构分析/* The ma_values pointer is NULL for a combined table * or poi
  • 1.按姓氏笔画排序:Select * From TableName Order By CustomerName Collate Chines
  • 简介OpenCV中使用VideoCapture类写的视频是没有音频的,如果要进一步处理音频则需要用到一个库——MoviePy,这个库是Pyt
  • 一、常见反爬机制及其破解方式封禁IP,使用cookie等前面文章已经讲过现在主要将下面的:~ 验证码 —> 文字验证码 —> O
  • 前言对MySQL有研究的读者,可能会发现MySQL更新很快,在安装方式上,MySQL提供了两种经典安装方式:解压式和一键式,虽然是两种安装方
  • 这个是捕获键盘事件输入状态的js代码,它可以判断你敲打了键盘的那个键,ctrl、shift,26个字母等等,返回具体键盘值。Javascri
手机版 网络编程 asp之家 www.aspxhome.com