js控制div弹出层实现方法
作者：fanyuna 发布时间：2023-10-15 05:53:28
标签：js,div,弹出层
本文实例讲述了js控制div弹出层实现方法。分享给大家供大家参考。具体分析如下：
这是个功能很好，且容易调用和控制的弹出层。感兴趣的朋友可以调试运行一下看看效果如何~O(∩_∩)O~
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出窗口(可拖动，背景灰色透明)</title>
<script type="text/javascript">
<!--
/*FileName:AlertMsg.js
title:提示标题
content:提示的内容*/
document.write("<style type=\"text/css\">*{padding:0; margin:0}.close{float:right;cursor:default}</style>")
function $(id){ return document.getElementById(id)}
function AlertMsg(title,content){
var msgw,msgh,msgbg,msgcolor,bordercolor,titlecolor,titlebg,con;
con = "<form><table style='margin:10px 15px 15px 15px; border:0;'><tr><th style='border:0; line-height:22px; padding:3px 0; vertical-align:top;font-weight:bold;'>分类：</th><td style='border:0; line-height:22px; padding:3px 0; vertical-align:top;width:75％;'><input type='text' name='typename' size='20'/></td></tr><tr><th></th><td style='border:0; line-height:22px; padding:3px 0; vertical-align:top;width:75％;'><button style='line-height:normal;' type='submit' onclick='return submitform()'>确定</button><button style='line-height:normal;' type='reset'>取消</button></td></tr></table></form>";
//弹出窗口设置
msgw = 300; //窗口宽度
msgh = 150; //窗口高度
msgbg = "#FFF"; //内容背景
msgcolor = "#000"; //内容颜色
bordercolor = "#000"; //边框颜色
titlecolor = "#FFF"; //标题颜色
titlebg = "#369"; //标题背景
//遮罩背景设置
var sWidth,sHeight;
sWidth = screen.availWidth;
sHeight = document.body.scrollHeight;
//创建遮罩背景
var maskObj = document.createElement("div");
maskObj.setAttribute('id','maskdiv');
maskObj.style.position = "absolute";
maskObj.style.top = "0";
maskObj.style.left = "0";
maskObj.style.background = "#777";
maskObj.style.filter = "Alpha(opacity=30);";
maskObj.style.opacity = "0.3";
maskObj.style.width = sWidth + "px";
maskObj.style.height = sHeight + "px";
maskObj.style.zIndex = "10000";
document.body.appendChild(maskObj);
//创建弹出窗口
var msgObj = document.createElement("div")
msgObj.setAttribute("id","msgdiv");
msgObj.style.position ="absolute";
msgObj.style.top = (screen.availHeight - msgh) / 4 + "px";
msgObj.style.left = (screen.availWidth - msgw) / 2 + "px";
msgObj.style.width = msgw + "px";
msgObj.style.height = msgh + "px";
msgObj.style.fontSize = "12px";
msgObj.style.background = msgbg;
msgObj.style.border = "1px solid " + bordercolor;
msgObj.style.zIndex = "10001";
//创建标题
var thObj = document.createElement("div");
thObj.setAttribute("id","msgth");
thObj.className = "DragAble";
thObj.style.cursor = "move";
thObj.style.padding = "4px 6px";
thObj.style.color = titlecolor;
thObj.style.background = titlebg;
var titleStr = "<a class='close' title='关闭' style='cursor:pointer' onclick='CloseMsg()'>关闭</a>"+"<span>"+ title +"</span>";
thObj.innerHTML = titleStr;
//创建内容
var bodyObj = document.createElement("div");
bodyObj.setAttribute("id","msgbody");
bodyObj.style.padding = "10px";
bodyObj.style.lineHeight = "1.5em";
bodyObj.innerHTML = con;
var txt = document.createTextNode(content)
bodyObj.appendChild(txt);
//生成窗口
document.body.appendChild(msgObj);
$("msgdiv").appendChild(thObj);
$("msgdiv").appendChild(bodyObj);
}
function CloseMsg(){
//移除对象
document.body.removeChild($("maskdiv"));
$("msgdiv").removeChild($("msgth"));
$("msgdiv").removeChild($("msgbody"));
document.body.removeChild($("msgdiv"));
}
//拖动窗口
var ie = document.all;
var nn6 = document.getElementById&&!document.all;
var isdrag = false;
var y,x;
var oDragObj;
function moveMouse(e) {
if (isdrag) {
oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";
oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";
return false;
}
}
function initDrag(e) {
var oDragHandle = nn6 ? e.target : event.srcElement;
var topElement = "HTML";
while (oDragHandle.tagName != topElement && oDragHandle.className != "DragAble") {
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
}
if (oDragHandle.className=="DragAble") {
isdrag = true;
oDragObj = oDragHandle.parentNode;
nTY = parseInt(oDragObj.style.top);
y = nn6 ? e.clientY : event.clientY;
nTX = parseInt(oDragObj.style.left);
x = nn6 ? e.clientX : event.clientX;
document.onmousemove = moveMouse;
return false;
}
}
document.onmousedown = initDrag;
document.onmouseup = new Function("isdrag=false");
//-->
</script>
</head>
<body>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr >
<td height="100" align="center" >
<p><a href="javascript:AlertMsg("温馨提示",'')">点我试试!</a></p>
</td>
</tr>
</table>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
0
投稿猜你喜欢
- having的用法having字句可以让我们筛选成组后的各种数据，where字句在聚合前先筛选记录，也就是说作用在group by和havi
CSRFCSRF全拼为Cross Site Request Forgery，译为跨站请求伪造。CSRF指攻击者盗用了你的身份，以你的名义发送- 用html的form上传文件时，request.FILES为空，没有收到上传来的文件，但是在request.POST里找到了上传的文件名（只
- 百度AI功能还是很强大的，百度AI开放平台真的是测试接口的天堂，免费接口很多，当然有量的限制，但个人使用是完全够用的，什么人脸识别、MQTT
- 一主一从： Master: OS:centos release 5.6 DB:mysql 5.5.8 IP:192.168.1.2 Slav
- 本文介绍在Python环境中，实现随机森林（Random Forest，RF）回归与各自变量重要性分析与排序的过程。其中，关于基于MATLA
- 废话不多说1.win+R 启动“运行”输入cmd 点确定2.输入 cd /d xxxxxxx回车jupyter notebook回车在这里我
- 首先，我们需要着重介绍一些概念，以给你提供一些使这个“奇迹”得以发生的组成部分。太轻易地泄露伏笔对于讲故事来说不是个好的形式，所以那些不愿意
- 通过三种方式给大家介绍，具体详情如下所示：方式一：原理：创建一个新的空字典，用循环的方式来获取列表中的每一个元素，判断获取的元素是否存在字典
- 前言：在motplotlib的学习过程中，我们使用最多的就是numpy模块。numpy 模块被称为 matplotlib 模块绘制图表伴侣。
- 具体代码见下。在此程序中，由于使用了变量，我们需将全部聊友的昵称用“，”（逗号）来隔开，储存到application（"visit
- 经常有需要扫描目录，对文件做批量处理的需求，所以对目录处理这块做了下学习和总结。Python 中扫描目录有两种方法：os.listdir 和
- 前序1、cookie介绍Cookie是一段不超过4KB的小型文本数据，保存在客户端浏览器中，由一个名称（Name）、一个值（Value）和其
- web2.0教程4：如何调用css样式表 这些技巧主要讲meta标签设置的，其实与符合web标准关系不大，只要注意在最后加"/&q
- 1、grid 布局说明：参数说明： sticky：在插件正常尺寸下，分配单元中多余的空间（如果没有声明属性，默认插
- 概述OpenCV 是一个跨平台的计算机视觉库, 支持多语言, 功能强大. 今天小白就带大家一起携手走进 OpenCV 的世界.梯度运算梯度:
- 本文实例讲述了PHP获取二叉树镜像的方法。分享给大家供大家参考，具体如下：问题操作给定的二叉树，将其变换为源二叉树的镜像。解决思路翻转二叉树
- 行向量方式1import numpy as npb=np.array([1,2,3]).reshape((1,-1))print(b,b.s
- 获取评论贴的请求头与表单数据下一篇在这里这里，我们随便选取一个网站，获取该贴评论后的请求头，表单数据以及评论贴链接。（因为涉及敏感信息，自己
- Python 中要将单个项目列表转换为整数：访问索引 0 处的列表。将结果分配给变量。该变量将存储列表中的唯一项目。my_list = [2
