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
投稿
猜你喜欢
- 解决方法: 1。 改表法。 可能是你的帐号不允许从远程登陆,只能在localhost。这个时候只要在localhost的那台电脑,登入mys
- 根据Vue.js + Element UI + MongoDB进行开发P1 安装Vue-CLIVue.js文档 利用Vue.js提供的一个官
- Python 条件语句Python条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块。可以通过下图来简单了解
- 其实这里的静态页面并不是真正意义上的静态,但可以达到了静态页面的解析效率,还未经项目测试,拿来分享。代码如下:<% Cons
- github源码地址:https://github.com/kuishou68/python各类图表的实现效果爬取的说说内容个性化说说内容词
- win10,直接使用 pip install tesserocr 的命令如果输出如下错误提示:tesserocr.cpp(596): fat
- Github 项目主页 工具源码分析结果:total : 15981 1568.0 == Backspace 1103.0 == Tab 1
- 实现效果在网站页面上,点击某个超链接,页面跳转到某个位置,跳转过程有一个动画滚动效果,这是一种比较酷的体验。这种效果是如何实现的呢,本文通过
- 方法一1. 下载MySQL源码分发包,不用区分操作系统,我们需要的东西是一样的;2. 重命名自己的mysql的data目录下的mysql文件
- 一、创建TensorRT有以下几个步骤:1.用TensorRT中network模块定义网络模型2.调用TensorRT构建器从网络创建优化的
- 引言微信群的用户添加逻辑是 —— 当群人数达到100人后,用户无法再通过扫描群二维码加入,只能让用户先添加群内联系人微信,再由联系人把用户拉
- 引入:Python中有个logging模块可以完成相关信息的记录,在debug时用它往往事半功倍一、日志级别(从低到高):DEBUG :详细
- 准备工作右击新建的项目,选择Python File,新建一个Python文件,然后在开头import cv2导入cv2库,import nu
- mysql5.6 解析JSON字符串支持复杂的嵌套格式废话不多说,先上代码。CREATE FUNCTION `json_parse`(`js
- 目录项目初始化选择 MQTT 客户端库Pip 安装 Paho MQTT 客户端Python MQTT 使用连接 MQTT 服务器导入 Pah
- 淘宝的页面很复杂,如果使用分析ajax或者js的方式,很麻烦抓取淘宝‘美食'上面的所有食品信息spider.py#encoding:
- 代码如下:Create trigger tri_wk_CSVHead_History on wk_CSVHead_History --声明
- <?php session_start(); $_SESSION['username']="zhuzhao&
- 需求背景假设我们想设计一个定时任务,比如每天定时的用python来测试服务是否在正常运行,但是又不希望每天登录到系统后台去查看服务状态。这里
- 首先是准备工作Python 2.7.11:下载pythonPycharm:下载Pycharm其中python2和python3目前同步发行,